javascript - 我可以使用任何 HTML 或 JavaScript API 在 input[type=file] 中获取文件的路径吗？

Question

我想实现一个上传图片功能。

上传后，我想获取文件本地路径，以便创建缩略图。但是我怎样才能得到文件路径呢？还有另一种创建缩略图的方法吗？

我试过 jQuery-File-Upload 插件。

Answer 1

jQuery File Upload Demo Page演示获取要上传的文件名的概念。添加文件时，文件名显示在控件下方的表格 View 中。

该插件有几个选项，包括在特定事件发生后触发的回调。

这是一个显示如何获取文件名的示例:

function (e, data) {
    $.each(data.files, function (index, file) {
        alert('Added file: ' + file.name);   // filename alerted
    });
    data.url = '/path/to/upload/handler.json';
    var jqXHR = data.submit()
        .success(function (result, textStatus, jqXHR) {/* ... */})
        .error(function (jqXHR, textStatus, errorThrown) {/* ... */})
        .complete(function (result, textStatus, jqXHR) {/* ... */});
}

根据文档，如果您使用 .bind 绑定(bind)回调函数，您将有最大的成功机会。 jQuery的关键字:

$('#fileupload')
   .bind('fileuploadadd', function(e, data) { ... } );

来自关于“添加”的文档:

The data parameter allows to override plugin options as well as define ajax settings. data.files holds a list of files for the upload request: If the singleFileUploads option is enabled (which is the default), the add callback will be called once for each file in the selection for XHR file uploads, with a data.files array length of one, as each file is uploaded individually. Else the add callback will be called once for each file selection.

这是jQuery File Upload Options的完整列表.

此外，只有部分浏览器支持图像预览，这是您访问文件名的目标:

Image previews

The following browsers have support for image previews prior to uploading files:

• Firefox 3.6+
• Google Chrome
• Opera 11+

Browser Support页面详细说明了插件的哪些功能在不同的浏览器中受支持和不受支持。