JavaScript操作文件.pdfVIP

JavaScript 操作文件 在 HTML 表单中，可以上传文件的唯一控件就是input type=file 。 注意 ：当一个表单包含input type=file时，表单的 enctype 必须指定为 multipart/form-data ，method 必须指定为 post ，浏览器才能正确编码并以multipart/form-data 格式发送表单的数据。 出于安全考虑，浏览器只允许用户点击input type=file来选择本地文件，用JavaScript 对input type=file的value 赋值是没有任何效果的。当用户选择了上传某个文件后，JavaScript 也无法获得该文件的真实路径： 通常，上传的文件都由后台服务器处理，JavaScript 可以在提交表单时对文件扩展名做检查，以便防止用户上传无效格式的 文件： var f = document.getElementById(test-file-upload); var filename = f.value; // C:\fakepath\test.png if (!filename || !(filename.endsWith(.jpg) || filename.endsWith(.png) || filename.endsWith(.gif))) { alert(Can only upload image file.); return false; } File API 由于JavaScript 对用户上传的文件操作非常有限，尤其是无法读取文件内容，使得很多需要操作文件的网页不得不用 Flash 这样的第三方插件来实现。 随着 HTML5 的普及，新增的 File API 允许 JavaScript 读取文件内容，获得更多的文件信息。 HTML5 的 File API 提供了 File 和 FileReader 两个主要对象，可以获得文件信息并读取文件。 下面的例子演示了如何读取用户选取的图片文件，并在一个div中预览图像： var fileInput = document.getElementById(test-image-file), info = document.getElementById(test-file-info), 1 / 3 preview = document.getElementById(test-image-preview); // 监听 change 事件: fileInput.addEventListener(change, function () { // 清除背景图片: preview.style.backgroundImage = ; // 检查文件是否选择: if (!fileInput.value) { info.innerHTML = 没有选择文件; return; } // 获取 File 引用: var file = fileInput.files[0]; // 获取 File 信息: info.innerHTML = 文件: + file.name + br + 大小: + file.size + br + 修改: + file.lastModifiedDate; if (file.type !== image/jpeg file.type !== image/png file.type !== image/gif) { alert(不是有效的图片文件!); return; } // 读取文件: var reader = new FileReader();