<!DOCTYPE?html>
<html>
<head>
????<meta?charset="utf-8">
????<script?src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
????<script>
????????function?fileSelected()?{
????????????var?file?=?document.getElementById('fileToUpload').files[0];
????????????if?(file)?{
????????????????var?fileSize?=?0;
????????????????if?(file.size?>?1024?*?1024)
????????????????????fileSize?=?(Math.round(file.size?*?100?/?(1024?*?1024))?/?100).toString()?+?'MB';
????????????????else
????????????????????fileSize?=?(Math.round(file.size?*?100?/?1024)?/?100).toString()?+?'KB';
????????????????document.getElementById('fileName').innerHTML?=?'Name:?'?+?file.name;
????????????????document.getElementById('fileSize').innerHTML?=?'Size:?'?+?fileSize;
????????????????document.getElementById('fileType').innerHTML?=?'Type:?'?+?file.type;
????????????}
????????}
????????function?uploadFile()?{
????????????if?(?typeof(document.getElementById('fileToUpload').files[0])=='undefined'?)?return?alert('未選擇任何文件');
????????????var?fd?=?new?FormData();
????????????fd.append("fileToUpload",?document.getElementById('fileToUpload').files[0]);
????????????var?Form1=new?Object();
????????????var?Form1_serializeArray?=?$("#form1").serializeArray();
????????????for?(k?in?Form1_serializeArray)?{
????????????????Form1[Form1_serializeArray[k]['name']]=Form1_serializeArray[k]['value'];
????????????}
????????????fd.append("form1",?JSON.stringify(Form1));
????????????var?xhr?=?new?XMLHttpRequest();
????????????xhr.upload.addEventListener("progress",?uploadProgress,?false);
????????????xhr.addEventListener("load",?uploadComplete,?false);
????????????xhr.addEventListener("error",?uploadFailed,?false);
????????????xhr.addEventListener("abort",?uploadCanceled,?false);
????????????xhr.open("POST",?"var_dump.php");//修改成自己的接口
????????????xhr.send(fd);
????????}
????????function?uploadProgress(evt)?{
????????????if?(evt.lengthComputable)?{
????????????????var?percentComplete?=?Math.round(evt.loaded?*?100?/?evt.total);
????????????????document.getElementById('progressNumber').innerHTML?=?percentComplete.toString()?+?'%';
????????????}
????????????else?{
????????????????document.getElementById('progressNumber').innerHTML?=?'unable?to?compute';
????????????}
????????}
????????function?uploadComplete(evt)?{
????????????/*?服務器端返回響應時候觸發(fā)event事件*/
????????????alert(evt.target.responseText);
????????}
????????function?uploadFailed(evt)?{
????????????alert("There?was?an?error?attempting?to?upload?the?file.");
????????}
????????function?uploadCanceled(evt)?{
????????????alert("The?upload?has?been?canceled?by?the?user?or?the?browser?dropped?the?connection.");
????????}
????</script>
</head>
<body>
<form?id="form1"?onsubmit="return?false">
????<div?class="row">
????????<label?for="fileToUpload">Select?a?File?to?Upload</label><br><br>
????????file：<input?type="file"?name="fileToUpload"?id="fileToUpload"?onchange="fileSelected()"><br><br>
????????aa：<input?type="text"?name="aa"><br><br>
????????bb：<input?type="text"?name="bb"><br><br>
????????cc：<input?type="text"?name="cc"><br><br>
????????dd：<input?type="text"?name="dd"><br><br>
????</div>
????<div?id="fileName"></div>
????<div?id="fileSize"></div>
????<div?id="fileType"></div>
????<div?class="row">
????????<input?type="button"?onclick="uploadFile()"?value="Upload">
????</div>
????<div?id="progressNumber"></div>
</form>這段代碼可以簡化嗎？我總感覺var?Form1?=?new?Object();
var?Form1_serializeArray?=?$("#form1").serializeArray();
for?(k?in?Form1_serializeArray)?{
????Form1[Form1_serializeArray[k]['name']]=Form1_serializeArray[k]['value'];
}
fd.append("form1",?JSON.stringify(Form1));這段代碼復雜了當然，其他可以簡化的地方，我也很想知道 嘿
模擬post提交serializeArray數(shù)據(jù)？
hhhzihao2
2017-02-20 15:50:31