大佬教程收集整理的这篇文章主要介绍了HTML5 Form Data 对象,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
利用FormData对象,你可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLhttprequest发送这个"表单".
var oMyForm = new FormData(); oMyForm.append("username","Groucho"); oMyForm.append("accountnum",123456); // 数字123456被立即转换成字符串"123456" // fileInputElement中已经包含了用户所选择的文件 oMyForm.append("userfile",fileInputElement.files[0]); var oFileBody = "<a id="a"><b id="b">hey!</b></a>"; // Blob对象包含的文件内容 var oBlob = new Blob([oFileBody],{ type: "text/xml"}); oMyForm.append("webmasterfile",oBlob); var oReq = new XMLhttprequest(); oReq.open("POST","submitform.PHP"); oReq.send(oMyForm);
var formElement = document.getElementById("myFormElement"); var oReq = new XMLhttprequest(); oReq.open("POST","submitform.PHP"); oReq.send(new FormData(formElement));
还可以在已有表单数据的基础上,继续添加新的键值对,如下:
var formElement = document.getElementById("myFormElement"); formData = new FormData(formElement); formData.append("serialnumber",serialnumber++); oReq.send(formData);
<form enctype="multipart/form-data" method="post" name="fileinfo"> <label>Your email address:</label> <input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64" /> </form> <div id="output"></div> <a href="javascript:sendForm()">Stash the file!</a>
function sendForm() { var oOutput = document.getElementById("output"); var oData = new FormData(document.forms.namedItem("fileinfo")); oData.append("CustomField","This is some extra data"); var oReq = new XMLhttprequest(); oReq.open("POST","stash.PHP",truE); oReq.onload = function(oEvent) { if (oReq.status == 200) { oOutput.innerHTML = "Uploaded!"; } else { oOutput.innerHTML = "Error " + oReq.status + " occurred uploading your file.<br \/>"; } }; oReq.send(oData); }
如果FormData对象中的某个字段值是一个Blob对象,则在发送http请求时,代表该Blob对象所包含文件的文件名的"Content-Disposition"请求头的值在不同的浏览器下有所不同,Firefox使用了固定的字符串"blob,"而Chrome使用了一个随机字符串.
你还可以使用jQuery来发送FormData,但必须要正确的设置相关选项:
var fd = new FormData(document.getElementById("fileinfo")); fd.append("CustomField","This is some extra data"); $.ajax({ url: "stash.PHP",type: "POST",data: fd,processData: false,// 告诉jQuery不要去处理发送的数据 contentType: false // 告诉jQuery不要去设置Content-Type请求头 });
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() { var fd = new FormData(); fd.append("fileToUpload",document.getElementById('fileToUpload').files[0]); 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","Home/Upload"); xhr.send(fd); } function uploadProgress(evt) { if (evt.lengthComputablE) { var NowDate = new Date().getTime(); taking = NowDate - startDate; var x = (evt.loaded) / 1024; var y = taking / 1000; var uploadSpeed = (x / y); var formatSpeed; if (uploadSpeed > 1024) { formatSpeed = (uploadSpeed / 1024).toFixed(2) + "Mb\/s"; } else { formatSpeed = uploadSpeed.toFixed(2) + "Kb\/s"; } var percentComplete = Math.round(evt.loaded * 100 / evt.@R_702_10586@l); progressbar.progressbar("value",percentCompletE); // console && console.log(percentComplete,",formatSpeed); } } function uploadComplete(evt) { /* This event is raised when the server send BACk a response */ 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."); }
以上是大佬教程为你收集整理的HTML5 Form Data 对象全部内容,希望文章能够帮你解决HTML5 Form Data 对象所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。