javascript|javascript input图片上传及预览,FileReader预览图片 javascriptinput图片上传及预览|

FileReader是前端进行文件处理的一个重要的Api，特别是在对图片的处理上，如果你想知道图片的处理原理，你就永远不可能绕过它。

.file-ipt{position: absolute; left:0; top: 0; opacity: 0; width: 50px; height: 25px; }//这里透明化了input框，然后绝对定位在按钮上了.btn{width: 50px; height: 25px; background-color: skyblue; color: white; margin-right: 80px; border: none; border-radius: 10px; font-size: 8px; }

文章图片

【javascript|javascript input图片上传及预览,FileReader预览图片】知识点补充:JS input file图片上传预览效果
首先，可以先了解file 和FileReader 的API，在选取一个或者多个文件之后,访问到代表了所选文件的一个或多个File对象，这些对象被包含在一个FileList对象中。所有type属性(attribute)为file的元素都有一个files属性，用来存储用户所选择的文件。files有一个length属性和item方法，我们可以通过files[index]或者files.item(index)获取我们选择的file对象。可以通过change事件监听input file输入完成事件。
html代码：

文章图片

文章图片

+最多20张

js代码：

//商品相册图片上传预览function liUploadImg(file){if (file.files && file.files[0]){var reader = new FileReader(); reader.onload = function(evt){ // imgUpload.src = https://www.it610.com/article/evt.target.result; $('.crgoods_uploadUl li.add').before('

文章图片

'); }reader.readAsDataURL(file.files[0]); }else{ var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="'; file.select(); var src = https://www.it610.com/article/document.selection.createRange().text; imgUpload.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = https://www.it610.com/article/src; }}