createObjectURL方法制作前端图片预览上传

Html

Css

Js

body { margin:0; } .file { display:block; height:120px; width:120px; position:relative; margin:0 auto; overflow:hidden; text-decoration:none; text-indent:0; border:none; margin-top:20px; } .file input { height:120px; width:120px; font-size:100px; margin:0; padding:0; position:absolute; left:0; top:0; opacity:0; z-index:999; } .file img { width:120px; height:120px; position:absolute; left:0; top:0; border:none; } #img-box { text-align:center; width:100%; height:120px; margin:0; margin-top:20px; } #img-box img { width:120px; height:120px; margin-right:10px; border:1px solid #eee; }

(function() { //获取图片路径方法 function getObjectURL(file) { var url = null; if (window.createObjectURL != undefined) { // basic url = window.createObjectURL(file); } else if (window.URL != undefined) { // mozilla(firefox) url = window.URL.createObjectURL(file); } else if (window.webkitURL != undefined) { // webkit or chrome url = window.webkitURL.createObjectURL(file); } return url; } function preview(that, options) { //接受files数组列表 var _file = that.files, str = ""; console.log(_file); //限制上传图片的最大值 if (_file.length > options.maxLen) { alert("最多上传" + options.maxLen + "张图片！"); return; } //循环拼接为字符串 for (var i = 0; i < _file.length; i++) { str += "<img src='" + getObjectURL(_file[i]) + "'/>"; } //将图片动态添加到图片展示区 document.getElementById(options.showID).innerHTML = str; } var upload_preview = window.uploadPreview = function(options) { var defaults = { fileID: options.fileID || "file", showID: options.showID || "img-box", maxLen: options.maxLen || 3 } //获取页面的input标签 var file = document.getElementById(defaults.fileID); //给input绑定change事件 file.onchange = function() { var that = this; preview(that, defaults); }; } })() //调用 uploadPreview({ fileID: "file", //input的id showID: "img-box", //预览图片存放的div盒子 maxLen: 2 //允许上传的最大值 });

↑上面代码改变，会自动显示代码结果

jQuery调用版本：1.11.3

uploadPreview({
    fileID : "file", //input的id
    showID : "img-box",//预览图片存放的div盒子
    maxLen : 2  //允许上传的最大值
});

用createObjectURL方法制作的可控制上传图片张数的预览插件