具体要做的就是页面上有个的按钮,用户在选择需要上传的图片后,页面上将要上传的图片预览出来。
以前的做法是,通过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]); } }