使用 jquery easy ui 通过 ajax 上传文件答案

【问题标题】：upload file via ajax with jquery easy ui使用 jquery easy ui 通过 ajax 上传文件
【发布时间】：2013-11-28 18:06:47
【问题描述】：

我试图让用户可以使用jQuery EasyUI form widget从位于他们计算机上的文件中导入数据：

<form id="my_form" method="POST">
    <input type="file" name="my_file" id="my_file" />
</form>

var file_name = $('#my_file').val();

if(file_name)
{       
    $('#my_form').form('submit', {
        url: [url_to_call],
        onSubmit: function(param){
             param.file_path = file_name;
        }
    });
}

然后，当用户在他/她的计算机上浏览文件时，我想将路径发送到 jQuery ajax 查询以执行一些上传操作。我遇到的问题是filename 返回如下内容：

C:\fakepath\[name_of_file]

由于fakepath 字符串，我无法获得用户计算机上文件所在位置的真实路径。请问有人知道如何解决这个问题吗？

谢谢

【问题讨论】：

你不能真正用 ajax 上传文件，你必须上传一个 formData 对象，或者对于不支持的浏览器使用 iframe。
@adeneo 不，我已经在我的一个支持 IE7+ 上传图像的应用程序中实现了 Ajax 上传。我在上传后向他们展示图像预览（没有页面刷新）。
为什么不用谷歌？对于 ajax 和文件上传爱好者来说，这可能是最常问的问题之一
@KingAnirudhaIII - 那是完全不同的东西，它是显示来自用户计算机的图像的 HTML5 文件 API，没有人说你必须重新加载页面，但你不能从直接输入文件，您必须上传包含图像文件的formData对象或使用iframe在不支持formData的浏览器中提交表单。

标签： javascript html jquery jquery-easyui

【解决方案1】：

试过这个插件http://malsup.com/jquery/form/#getting-started

这个插件提供了一个名为 AjaxSubmit() 的方法，可以很好地上传图片。我在 2011 年用过。

它在 IE 中存在一些问题（旧版本，如 6,7）。你需要写一些技巧。在后端 Firefox 和 IE 上上传正确的文件流格式，如Data/Image，但在 Chrome (Webkit) 中，您将获得 Octet Stream。您需要在服务器上解析文件格式以检查文件是否错误。

【讨论】：

【解决方案2】：

我不知道你的 form() 函数是做什么的，因为 jQuery 中不存在这样的方法，但是将文件上传到服务器的通常方式是这样的：

$('#my_file').on('change', function() {
    $.ajax({
        url  : [url_to_call],
        data : new FormData($('#my_form').get(0)),
        processData: false,
        contenttype: false
    }).done(function(param) {
        param.file_path = file_name;
    });
});

【讨论】：