圆月山庄资源网

jQuery Ajax方式上传文件的方法
网络编程 2024/12/27 佚名
3 2
圆月山庄资源网 Design By www.vgjia.com

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

第一个对象：FormData

第二个对象：XMLHttpRequest

目前新版的Firefox 与 Chrome 等支持HTML5的浏览器完美的支持这两个对象，但IE9尚未支持 FormData 对象，还在用IE6 "background-color: #ffcc00">示例代码：

<!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方式上传文件，上面的代码中使用<input type="file" />这种传统的选择文件的方法产生文件对象，HTML5还支持使用多种更灵活的方式，如拖拽文件到指定的元素上产生。

Ajax已成功上传文件，但这时我们会想到一个问题，如何显示进度条？带着这个问题，脑子会想到，Flash"htmlcode"> 

<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，带进度显示：

<!DOCTYPE html>
<html>
<head>
 <title>Html5 Ajax 上传文件</title>
 <script type="text/javascript">
  function UpladFile() {
   var fileObj = document.getElementByIdx_x_x("file").files[0]; // js 获取文件对象
   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.upload.addEventListener("progress", progressFunction, false);
   xhr.send(form);
  }
  function progressFunction(evt) {
   var progressBar = document.getElementByIdx_x_x("progressBar");
   var percentageDiv = document.getElementByIdx_x_x("percentage");
   if (evt.lengthComputable) {
    progressBar.max = evt.total;
    progressBar.value = evt.loaded;
    percentageDiv.innerHTML = Math.round(evt.loaded / evt.total * 100) + "%";
   }
  } 
 </script>
</head>
<body>
 <progress id="progressBar" value="0" max="100">
 </progress>
 <span id="percentage"></span>
 <br />
 <input type="file" id="file" name="myfile" />
 <input type="button" onclick="UpladFile()" value="上传" />
</body>
</html>

 后台接收文件的程序可以是任何语言(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);
   }

以上所述是小编给大家介绍的jQuery Ajax方式上传文件的方法，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

标签：
jquery,ajax,上传文件
圆月山庄资源网 Design By www.vgjia.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
圆月山庄资源网 Design By www.vgjia.com
www.vgjia.com 圆月山庄资源网
139,976互联网资源
144,792高清电影
21,817无损音乐
631,128技术资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接