通过预览上传多个图像

Question

我有一个文件上传字段,可以接受多个图像.我需要在上传之前预览这些图像.我还可以设置上传最大图像数量的限制吗？

Answer 1

试试这个。\n http://maraustria.wordpress.com/2014/04/25/multiple-select-and-preview-of-image-of-file-upload/

\n\n

网页

\n\n

<label for=\xe2\x80\x9dfiles\xe2\x80\x9d>Select multiple files: </label>\n<input id=\xe2\x80\x9dfiles\xe2\x80\x9d type=\xe2\x80\x9dfile\xe2\x80\x9d multiple/>\n<output id=\xe2\x80\x9dresult\xe2\x80\x9d />\n

\n\n

JavaScript

\n\n

window.onload = function(){\n//Check File API support\nif(window.File && window.FileList && window.FileReader)\n{\nvar filesInput = document.getElementById(\xe2\x80\x9cfiles\xe2\x80\x9d);\nfilesInput.addEventListener(\xe2\x80\x9cchange\xe2\x80\x9d, function(event){\nvar files = event.target.files; //FileList object\nvar output = document.getElementById(\xe2\x80\x9cresult\xe2\x80\x9d);\nfor(var i = 0; i< files.length; i++)\n{\nvar file = files[i];\n//Only pics\nif(!file.type.match(\xe2\x80\x98image\xe2\x80\x99))\ncontinue;\nvar picReader = new FileReader();\npicReader.addEventListener(\xe2\x80\x9cload\xe2\x80\x9d,function(event){\nvar picFile = event.target;\nvar div = document.createElement(\xe2\x80\x9cdiv\xe2\x80\x9d);\ndiv.innerHTML = \xe2\x80\x9c<img class=\xe2\x80\x99thumbnail\xe2\x80\x99 src=\xe2\x80\x99\xe2\x80\x9d + picFile.result + \xe2\x80\x9c\xe2\x80\x98\xe2\x80\x9d +\n\xe2\x80\x9ctitle=\xe2\x80\x99\xe2\x80\x9d + picFile.name + \xe2\x80\x9c\xe2\x80\x98/>\xe2\x80\x9d;\noutput.insertBefore(div,null);\n});\n//Read the image\npicReader.readAsDataURL(file);\n}\n});\n}\nelse\n{\nconsole.log(\xe2\x80\x9cYour browser does not support File API\xe2\x80\x9d);\n}\n}\n

\n\n

CSS

\n\n

body{\nfont-family: \xe2\x80\x98Segoe UI\xe2\x80\x99;\nfont-size: 12pt;\n}\n\nheader h1{\nfont-size:12pt;\ncolor: #fff;\nbackground-color: #1BA1E2;\npadding: 20px;\n\n}\narticle\n{\nwidth: 80%;\nmargin:auto;\nmargin-top:10px;\n}\n\n.thumbnail{\n\nheight: 100px;\nmargin: 10px;\n}\n

\n\n

http://jsfiddle.net/0GiS0/Yvgc2/

\n