4

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

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

我试过 jQuery-File-Upload 插件。

4

3 回答 3

1

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

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

于 2012-04-10T06:40:12.470 回答
1

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

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

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

从有关“添加”的文档中：

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

这是jQuery 文件上传选项的完整列表。

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

图像预览

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

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

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

于 2012-04-10T06:52:35.990 回答
0

我认为 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" />
于 2012-04-10T06:40:14.860 回答