- function selectImage(imgFile){
- // 上传的多张图片
- var allFiles = imgFile.files;
- var imgArr = [];
- for(var i=0;i<allFiles.length;i++){
- var file = allFiles[i];
- // 添加一层过滤
- var rFilter = /^(image\/bmp|image\/gif|image\/jpeg|image\/png|image\/tiff)$/i;
- if(!rFilter.test(file.type)) {
- alert("文件格式必须为图片");
- return;
- }
- var reader = new FileReader();
- reader.readAsDataURL(file);
- reader.onload = function(e){
- // 计算最后一个窗口 right 边距, 当时处于第 4 个的时候, right=0
- if((allFiles.length + 1)%4 == 0){
- document.getElementById("uploadBtn").style.marginRight = "0px";
- }
- // 以下就是将所有上传的图片回显到页面上, 如果需要用 canvas 进行剪裁再回显以下代码就放入到 canvas 中
- var li = document.createElement('li');
- li.className = "upload-li";
- li.innerhtml = '<div class="item image">'+
- '<img class="upload-image"src="'+e.target.result+'"/>'+
- '</div>';
- document.getElementById("uploadUL").insertBefore(li, document.getElementById("uploadBtn"));
- }
- }
- }
- <input type="file" multiple onchange="selectImage(this)" accept="image/gif, image/jpeg, image/png" id="upload">
- <ul id="uploadUL"></ul>
来源: http://www.bubuko.com/infodetail-2725866.html