js上传文件预览的简洁实例_

1、js上传文件预览的简洁实例_ 下面我就为大家带来一篇js 上传文件预览的简洁实例。我觉得挺不错的，现在就分享给大家，也给大家做个参考。 1. FILE API html5供应了FIle和FileReader两个方法，可以读取文件信息并读取文件。 2. example html body div id=test-image-preview style=border: 1px solid rgb(204, 204, 204); width: 100%; height: 200px; background-size: contain; background-repeat: no-repeat; ba

2、ckground-position: center center; /div br/ div id=test-file-info/div br/ input type=file id=test-image-file script type=text/javascript var fileInput = document.getElementById(test-image-file), info = document.getElementById(test-file-info), preview = document.getElementById(test-image-preview); / 监

3、听change大事: fileInput.addEventListener(change, function () / 清除背景图片: preview.style.backgroundImage = ; / 检查文件是否选择: if (!fileInput.value) info.innerHTML = 没有选择文件; return; / 猎取File引用: var file = fileInput.files0; / 猎取File信息: info.innerHTML = 文件: + + br + 大小: + file.size + br + 修改: + file.last

4、ModifiedDate; if (file.type != image/jpeg file.type != image/png file.type != image/gif) alert(不是有效的图片文件!); return; / 读取文件: var reader = new FileReader(); reader.onload = function(e) var data = e.target.result; / data:image/jpeg;base64,/9j/4AAQSk.(base64编码). preview.style.backgroundImage = url( + da

5、ta + ); ; / 以DataURL的形式读取文件: reader.readAsDataURL(file); ); /script /body /html 以DataURL的形式读取到的文件是一个字符串，类似于data:image/jpeg;base64,/9j/4AAQSk.(base64编码).， 常用于设置图像。假如需要服务器端处理，把字符串base64,后面的字符发送给服务器并用Base64解码就可以得到原始文件的二进制内容。 3. 说明 上面的代码还演示了JavaScript的一个重要的特性就是单线程执行模式。在JavaScript中，扫瞄器的JavaScript执行引擎在执行J

6、avaScript代码时，总是以单线程模式执行，也就是说，任何时候，JavaScript代码都不行能同时有多于1个线程在执行。 你可能会问，单线程模式执行的JavaScript，如何处理多任务？ 在JavaScript中，执行多任务事实上都是异步调用，比如上面的代码： reader.readAsDataURL(file); 就会发起一个异步操作来读取文件内容。由于是异步操作，所以我们在JavaScript代码中就不知道什么时候操作结束，因此需要先设置一个回调函数： reader.onload = function(e) / 当文件读取完成后，自动调用此函数: ; 当文件读取完成后，JavaScript引擎将自动调用我