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

Question

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

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

我试过 jQuery-File-Upload 插件。

Answer 1

出于安全原因，无法获取文件路径。您只能通过从值中删除 fakepath 来获取文件名：input.value.split("/")[1]。

要创建缩略图，请使用已上传的文件，而不是本地文件。

Answer 2

我认为 chrome 支持这一点，但不确定是否出于安全原因将其删除。无论如何，您可以尝试使用 javascrip 设置某些 div 的自定义宽度和高度，并使用上传文件的 readAsDataURL

 <script type="text/javascript">     

function uploadFile(input) {         

if (input.files && input.files[0]) {            

 var reader = new FileReader();              
 reader.onload = function (e) {                 
 $('#test').attr('src', e.target.result).width(100).height(100);             
 };               
 reader.readAsDataURL(input.files[0]);        
 }     
} 

</script> 

<input type='file' onchange="uploadFile(this);" />     <img id="test" src="#" alt="my image" /> 

Answer 3

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

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

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

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) {/* ... */});
}

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

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

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

data 参数允许覆盖插件选项以及定义 ajax 设置。 data.files 保存上传请求的文件列表：如果启用了 singleFileUploads 选项（这是默认选项），将为 XHR 文件上传选择中的每个文件调用一次 add 回调，并带有 data.files 数组长度为一，因为每个文件都是单独上传的。否则每次文件选择都会调用一次添加回调。

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

另外，只有部分浏览器支持图片预览，这是你访问文件名的目的：

图片预览

以下浏览器支持上传文件前的图片预览：

• 火狐3.6+
• 谷歌浏览器
• Opera 11+

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