javascript 使用 Jquery 上传 Excel 文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15922223/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Upload an Excel File using Jquery
提问by Lakshman
I want to upload an Excel file using Jquery through RestEasy Service which consumes multipart/form-data. Whether I want to use Ajax for File upload or simple Jquery/Javascript is more enough. If I want to use only Ajax means, what kind of content-type do I have to post for upload?
我想通过使用多部分/表单数据的 RestEasy 服务使用 Jquery 上传 Excel 文件。无论我想使用 Ajax 进行文件上传还是简单的 Jquery/Javascript 就足够了。如果我只想使用 Ajax 方式，我必须发布什么样的内容类型才能上传？
This is my HTML & Jquery Code.
这是我的 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;">
回答by Dulith De Costa
You can get it done by both jQuery and HTML. Refer the coding below. It is in HTML.
您可以通过 jQuery 和 HTML 来完成。参考下面的编码。它在 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 </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>
回答by Shikiryu
If you want to upload without any page reload with JS and fallback, you can use http://www.uploadify.com/or http://www.plupload.com/
如果你想上传没有任何页面重新加载与 JS 和回退，你可以使用http://www.uploadify.com/或http://www.plupload.com/
I tested and validated both of them :)
我测试并验证了它们:)
回答by f4r4
Use ajaxfileupload.js I have done multiple file uploads using this, its a great js library, you will have total control over your uploads !
使用 ajaxfileupload.js 我已经使用它完成了多个文件上传，它是一个很棒的 js 库，您可以完全控制您的上传！
https://code.google.com/p/my-web-js/downloads/detail?name=ajaxfileupload.js&can=2&q=
https://code.google.com/p/my-web-js/downloads/detail?name=ajaxfileupload.js&can=2&q=
回答by Simon
If you are using HTML5, this should be easy.
如果您使用 HTML5，这应该很容易。
This is how I did with the file upload
这就是我对文件上传的处理方式
HTML,
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,
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();
})
回答by Hariprakash Sambath
You can use XMLHttpRequestand FormDatafor uploading a file,
您可以使用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)
}
})
})
You can get & handle the file in back-end.
您可以在后端获取和处理文件。
