ajax HTML5上传图片

发布时间：2020-12-16 00:34:31 所属栏目：百科来源：网络整理

导读：参考： http://robertnyman.com/2013/02/11/using-formdata-to-send-forms-with-xhr-as-keyvalue-pairs/ https://developer.mozilla.org/en-US/docs/Web/Guide/Using_FormData_Objects HTML: form enctype="multipart/form-data" method="post" name="fileinf

参考：
http://robertnyman.com/2013/02/11/using-formdata-to-send-forms-with-xhr-as-keyvalue-pairs/
https://developer.mozilla.org/en-US/docs/Web/Guide/Using_FormData_Objects

HTML:

<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" /><br />
  <label>Custom file label:</label>
  <input type="text" name="filelabel" size="12" maxlength="32" /><br />
  <label>File to stash:</label>
  <input type="file" name="file" required />
  <input type="submit" value="Stash the file!" />
</form>
<div id="output"></div>

Javascript:

var form = document.forms.namedItem("fileinfo");
form.addEventListener('submit',function(ev) {

  var
    oOutput = document.getElementById("output"),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);
  ev.preventDefault();
},false);

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!