二话不说, 上 code.
中间用到了 FileReader, 把图片数据读取并且展示
使用了方法 onload 和 readAsDataURL
- code
- <style>
- .thumb {
- height: 75px;
- border: 19x solid #000;
- margin: 10px 5px 0 0;
- }
- </style>
- <input type="file" id="files" name="files[]" multiple/><br/>
- <output id="list"></output>
- <script>
- function handleFileSelect(evt) {
- // for (var i in evt.target) {
- // console.log(i)
- // console.log(evt.target[i])
- // console.log(" ")
- // }
- var files = evt.target.files;
- for (var i = 0; i <files.length; ++i) {
- var file = files[i];
- // image/PNG
- if (!file.type.match('image*')) {
- continue;
- }
- // console.log(file.type)
- var reader = new FileReader();
- console.log("2333")
- reader.onload = (function(theFile) {
- return function(e) {
- var span = document.createElement("span")
- console.log("result" + e.target.result)
- span.innerhtml = ['<img class="thumb"src="', e.target.result, '"title="',
- escape(theFile.name), '"/>', '<br/>'].join('')
- document.getElementById('list').insertBefore(span, null);
- }
- })(file);
- reader.readAsDataURL(file)
- }
- }
- document.getElementById("files").addEventListener('change',handleFileSelect, false);
- </script>
来源: http://www.bubuko.com/infodetail-3350230.html