首页 > 代码库 > html选择图片后预览，保存并上传
html选择图片后预览，保存并上传
html代码：
<input type="file" id="file" style="display:none;"> <img src="" width="200px" height="200px" id="img-change"> <button id="btn">保存图片</button>
js代码：
//实现点击图片同时，触发type=file这个input
$("#img-change").click(function () {
$("#file").click();
})
当input发生改变时，如果有图片，则预览图片（这里只判断文件的改变，没判断图片）
$("#file").change(function (event) {
var files = event.target.files, file;
if (files && files.length > 0) {
// 获取目前上传的文件
file = files[0];// 文件大小校验的动作
if(file.size > 1024 * 1024 * 2) {
alert(‘图片大小不能超过 2MB!‘);
return false;
}
// 获取 window 的 URL 工具
var URL = window.URL || window.webkitURL;
// 通过 file 生成目标 url
var imgURL = URL.createObjectURL(file);
//用attr将img的src属性改成获得的url
$("#img-change").attr("src",imgURL);
// 使用下面这句可以在内存中释放对此 url 的伺服，跑了之后那个 URL 就无效了
// URL.revokeObjectURL(imgURL);
}
})
html选择图片后预览，保存并上传
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。