具体要做的就是页面上有个的按钮,用户在选择需要上传的图片后,页面上将要上传的图片预览出来。
以前的做法是,通过Ajax将要上传的图片上传到服务器,服务器响应成功后在页面上添加一张图片。如果上传错误,则需要将服务器上的图片也删除。
现在可以通过H5这样做,代码如下:
document.querySelector('#upfile').onchange = function (evt) { var files = evt.target.files; for(var i = 0, f; f = files[i]; i++){ if(!f.type.match('image.*')) continue; var reader = new FileReader(); reader.onload = (function(theFile){ return function(e){ var img = document.createElement('img'); img.title = theFile.name; img.src = e.target.result; document.body.appendChild(img); //这里你想插哪插哪 } })(f); reader.readAsDataURL(f); } }
如果要一次上传多张图片,代码如下:
document.querySelector('#upfile').onchange = function () { var fileReader = new FileReader(); fileReader.onload = function (e) { if (fileReader.readyState == FileReader.DONE) { var img = document.createElement('img'); img.src = this.result; document.body.appendChild(img); //示例只是简单插入body } } //一次加载多个文件 var i = 0, src = this.files; fileReader.readAsDataURL(src[i]); fileReader.onloadend = function () { i++; if (i < src.length) fileReader.readAsDataURL(src[i]); } }
相关推荐
diyUpload JAVA版,支持多文件,多图片先预览后上传,JAVA 项目文件部署即可使用
.net上传图片之前预览 并上传到服务器
input file上传图片预览
JS+asp.net+图片上传+预览+支持多上传+上传前预览
C#上传图片预览,aspx,winform,都有。。
1 上传图片前实现本地预览图片。 2 兼容ie,firefox 3 实现判断文件大小。火狐下实现了上传前判断图片大小,ie下目前是采用ActiveXObject方法,但会弹框提示,不友好,提供ajax方式后台判断文件大小。 4 判断图片类型...
上传照片并预览,页面点击上传,即可预览上传的图片
实用JS,jQuery实现上传图片的预览功能,可以跟随鼠标移动
最强图片上传示例 可多次多选择可删除可预览 jQuery+Ashx 异步上传 史上最强图片上传示例。...项目开发中整理后分享出来,预览功能参考了“jQuery带删除功能多图片上传预览插件”。 整理及上传时间 2018.10.24
上传控件采用swf,可以批量上传图片,上传之前可以进行图片的预览.
web开发离不开图片上传功能,但是应该先实现图片在选择后的预览功能,然后才是上传功能。网上的文件上传插件很多很多,但是我发现大部分不带预览功能,即使带了预览功能,又强制和上传功能绑定在一起,那么如果我只...
angularjs实现上传图片并且预览
AJAX+PHP+JQ图片预览截取上传,简单高效!值得收藏!
php上传图片并预览图片源码包含html静态页和php源码类页面
实现asp.net中使用fileupload控件上传图片前预览功能,可兼容ie6,ie7,ie8,火狐等浏览器,实现真正的上传图片前预览,节约网络资源
java实现图片上传预览,包含asp和jsp的实现代码,以及相关说明
用于winform的图片上传下载,带图片预览,源码项目
vant 中的上传组件只能上传图片跟其他文件,只带默认的预览. 这里支持视频预览.视频录制.可同时选中相册的视频跟图片一起上传.npm run dev 就可以了.免c币下载地址: ...
在JSP上传图片前预览图片在JSP上传图片前预览图片
图片上传前预览,无需上传至服务器 同时可以进行图片剪切