使用 Jquery 上传 Excel 文件答案

【问题标题】：Upload an Excel File using Jquery使用 Jquery 上传 Excel 文件
【发布时间】：2013-04-10 09:38:59
【问题描述】：

我想通过使用多部分/表单数据的 RestEasy 服务使用 Jquery 上传 Excel 文件。无论我想使用 Ajax 进行文件上传还是简单的 Jquery/Javascript 都足够了。如果我只想使用 Ajax 方式，我必须发布什么样的内容类型才能上传？

这是我的 HTML 和 Jquery 代码。

<script type="Javascript">
    $(document).ready(function () {
        //var filename = document.getElementById("uploadedFile").value;
        var filename = $("#uploadedFile").val();
        //alert(filename);
        jQuery("#Upload").click(function () {
            $.ajax({
                url: 'service url',
                type: 'POST',
                contentType: 'application/json; charset=utf-8',
                // enctype: 'multipart/form-data',
                data: {
                    file: filename
                },
                cache: false,
                success: function (data) {
                    alert('success');
                    return false;
                },
                error: function (data, status) {
                    alert("failue");
                    alert(status);
                }
            });
        });
    });
</script>

<input type="file"  name="uploadedFile" id="uploadedFile" size="30" ><br><br>
<input type="button" id="Upload" name="Upload" value="Upload"  style="width:72px;height:23px;">

【问题讨论】：

无法使用 AJAX 上传 AFAIK 文件，但您可以查看 jquery 的 malsup.com/jquery/form 插件，该插件可以使用 ajax style 上传文件。
它不工作:(@vikas tyagi

标签： java javascript jquery

【解决方案1】：

如果您使用的是 HTML5，这应该很容易。

这就是我上传文件的方式

HTML，

<form method="POST" enctype="multipart/form-data"
      action="/file/upload" style="display: none">
      <input type="file" name="file"  multiple="multiple" id="uploadImages">
</form>

JS，

$('#uploadImages').on('change', function (){
            var formData = new FormData();
            for(var i = 0; i < this.files.length; i++){
                formData.append('file', this.files[i]);

                $.ajax({
                    url : '/file/upload',
                    type : 'post',
                    data : formData,
                    cache: false,
                    contentType: false,
                    processData: false,
                    success : function () {
                        alert("upload successfully")
                    }
                })

            }
        }
        $('form')[0].reset();
    })

【讨论】：

【解决方案2】：

您可以通过 jQuery 和 HTML 来完成它。参考下面的编码。它是 HTML 格式的。

HTML

<form id="" enctype="multipart/form-data" method="POST" name=""
      action='URL.do'>
    <table width="100%" height="0" border="0" style="border-collapse: collapse" cellpadding="0" cellspacing="0">
        <tr>
            <td>Select File to Upload&nbsp;</td>
            <td valign="top" colspan="3">
                <input type="file" name="excelFile" id="excelFile"
                       accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">
            </td>
        </tr>

        <tr>
            <td align="left">

                <input type="submit" class="buttons" onclick=""
                       id="btnUpload" name="btnUpload" value="Submit"/>
            </td>
        </tr>

    </table>

</form>

【讨论】：

【解决方案3】：

如果你想上传而不用 JS 和 fallback 重新加载任何页面，你可以使用 http://www.uploadify.com/ 或 http://www.plupload.com/

我测试并验证了他们两个:)

【讨论】：

uploadify 和 plupload 使用 HTML5。但是我使用的是普通的 HTML。 @Shikiryu
@Lakshman 正如我所说，他们使用后备。您可以指明您想要或不想要哪种方法。例如，plupload can have HTML4 & 5（或闪存等）。 Uploadify 没有那么多示例，我也没有在 HTML4 上下文中对其进行测试，所以我不知道，但我很确定他们使用相同类型的后备。

【解决方案4】：

使用 ajaxfileupload.js 我已经使用它完成了多个文件上传，它是一个很棒的 js 库，您将完全控制您的上传！

https://code.google.com/p/my-web-js/downloads/detail?name=ajaxfileupload.js&can=2&q=

http://www.phpletter.com/Our-Projects/AjaxFileUpload/

【讨论】：

【解决方案5】：

您可以使用 XMLHttpRequest 和 FormData 来上传文件，

$('#input-file').change(function() {

      var url = '/back-end-url';
      var form_data = new FormData();
      var xhr = new XMLHttpRequest();

      $.each(this.files, function (key, value) {
          form_data.append('file', value)
      })

      xhr.open('POST', url, true)
      xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest")
      xhr.send(form_data)

      xhr.onreadystatechange(function() {
          if(xhr.readyState == XMLHttpRequest.DONE) {
               var res = JSON.parse(xhr.responseText)
          }
      })

})

您可以在后端获取和处理文件。

【讨论】：