Home >Web Front-end >JS Tutorial >How to upload files using jQuery Ajax

How to upload files using jQuery Ajax

亚连Original: 2018-05-23 15:39:231708browse

这篇文章主要介绍了jQuery Ajax方式上传文件的方法的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下

jQuery Ajax方式上传文件用到两个对象

第一个对象：FormData

第二个对象：XMLHttpRequest

目前新版的Firefox 与 Chrome 等支持HTML5的浏览器完美的支持这两个对象，但IE9尚未支持 FormData 对象，还在用IE6 ? 只能仰天长叹....

有了这两个对象，我们可以真正的实现Ajax方式上传文件。

示例代码：

<!DOCTYPE html>
<html>
<head>
 <title>Html5 Ajax 上传文件</title>
 <script type="text/javascript">
  function UpladFile() {
   var fileObj = document.getElementByIdx_x_x("file").files[0]; // 获取文件对象
   var FileController = "../file/save";     // 接收上传文件的后台地址 
   // FormData 对象
   var form = new FormData();
   form.append("author", "hooyes");      // 可以增加表单数据
   form.append("file", fileObj);       // 文件对象
   // XMLHttpRequest 对象
   var xhr = new XMLHttpRequest();
   xhr.open("post", FileController, true);
   xhr.onload = function () {
    alert("上传完成!");
   };
   xhr.send(form);
  }
</script>
</head>
<body>
<input type="file" id="file" name="myfile" />
<input type="button" onclick="UpladFile()" value="上传" />
</body>
</html>

很简洁的代码，便可以达到Ajax方式上传文件，上面的代码中使用73fb0a88f70dfc104fc3e769bdf0b422这种传统的选择文件的方法产生文件对象，HTML5还支持使用多种更灵活的方式，如拖拽文件到指定的元素上产生。

Ajax已成功上传文件，但这时我们会想到一个问题，如何显示进度条？带着这个问题，脑子会想到，Flash? 浏览器插件？。

NO,现在不需要这些东西了。

开始着手，先做一个进度条，进度条也很简单，使用HTML5 新加的标签：

<progress id="progressBar" value="0" max="100"> </progress>

这个在浏览器中便会呈现了一个进度条，现在我们要做的就是在上传的时候，实时的去改变它的Value值，然后进度显示的问题便交给它了。

我们的服务器端无需修改，只需要在JS中XHR对象加一个事件。

xhr.upload.addEventListener("progress", progressFunction, false)

progressFunction 被调用的时候会传进一个事件对象，这个对象有两个属性，一个就是loaded 一个是total ，分别代表，已上传的值，和总要上传的值。

这正是我们需要的，所以这个方法，可以这样写：

function progressFunction(evt) {
   var progressBar = document.getElementByIdx_x_x("progressBar");
   if (evt.lengthComputable) {
    progressBar.max = evt.total;  
    progressBar.value = evt.loaded;
   }
  }

这样便可以完成，上传进度显示了。

如下针对上面的第一个示例代码，做一个调整：

示例代码2，带进度显示：




 Html5 Ajax 上传文件

后台接收文件的程序可以是任何语言(C#,PHP,Python 等)编写的，上述例子使用C#

很简单，无需为这个进度条做任何改动。

var flist = Request.Files;
   for (int i = 0; i < flist.Count; i++)
   {
    string FilePath = "E:\\hooyes\\Files\\";
    var c = flist[i];
    FilePath = Path.Combine(FilePath, c.FileName);
    c.SaveAs(FilePath);
   }

上面是我整理给大家的，希望今后会对大家有帮助。

利用ajax实现异步刷新请求

关于Ajax技术中servlet末尾的输出流

Ajax+php实现商品分类三级联动

The above is the detailed content of How to upload files using jQuery Ajax. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Using ajax to implement asynchronous refresh requestsNext article：Using ajax to implement asynchronous refresh requests

See more

How to upload files using jQuery Ajax

Related articles