Ajax方式上传文件

最新推荐文章于 2024-03-28 17:16:20 发布
最新推荐文章于 2024-03-28 17:16:20 发布
阅读量554 收藏
点赞数
分类专栏： html
用到两个对象
第一个对象： FormData

第二个对象：XMLHttpRequest

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

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

示例代码：


<!DOCTYPEhtml>

<html>

<head>

   <title>Html5 Ajax上传文件</title>

   <scripttype="text/javascript">


       functionUpladFile() {


          var fileObj =document.getElementByIdx_x_x("file").files[0]; //获取文件对象

          var FileController ="../file/save";                 //接收上传文件的后台地址 

         

          // FormData对象

          var form = newFormData();

          form.append("author","hooyes");                     //可以增加表单数据

          form.append("file", fileObj);                      // 文件对象


          // XMLHttpRequest对象

          var xhr = newXMLHttpRequest();

          xhr.open("post",FileController, true);

          xhr.onload = function (){

             alert("上传完成!");

          };

         xhr.send(form);


      }

</script>

</head>

<body>

<inputtype="file" id="file" name="myfile"/>

<inputtype="button" οnclick="UpladFile()" value="上传"/>

</body>

</html>


 

很简洁的代码，便可以达到Ajax方式上传文件，上面的代码中使用<inputtype="file"/>这种传统的选择文件的方法产生文件对象，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，带进度显示：


 

<!DOCTYPEhtml>

<html>

<head>

   <title>Html5 Ajax上传文件</title>

   <scripttype="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 = newXMLHttpRequest();

          xhr.open("post", FileController,true);

          xhr.onload = function () {

             //alert("上传完成!");

          };

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

          

          xhr.send(form);


       }

       functionprogressFunction(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>

   <spanid="percentage"></span>

   <br />

   <input type="file" id="file" name="myfile"/>

   <input type="button" οnclick="UpladFile()"value="上传" />

</body>

</html>


 

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

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


 

var flist = Request.Files;


          for (int i = 0; i < flist.Count;i++)

          {

              stringFilePath = "E:\\hooyes\\Files\\";

              var c =flist[i];

              FilePath =Path.Combine(FilePath, c.FileName);

             c.SaveAs(FilePath);

          }

yaoyaoopen
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery Ajax方式上传文件的方法
10-21
主要介绍了jQuery Ajax方式上传文件的方法的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
使用ajax上传附件file的方法及注意事项，含踩到的坑及部分网上内容测试！
牛牛的博客
08-03 1720
使用ajax上传附件file的方法及注意事项，含踩到的坑及部分网上内容测试！一、结论1、必须使用`$.ajax()`方式，不能使用`$.get()`和`$.post()`方式2、必须使用`FormData()`，将实体参数以及附件放入其中，进行传递3、其中file文件必须使用`$("#fileid")[0].files[0]`形式，否则无法识别4、$.ajax()中必须设置`contentType: false`和`processData: false`5、示例如下二、测试环境基本情况介绍1、背景说明2、试
ajax上传file文件
qq_40711092的博客
08-09 1861
后端 注意跨域问题 https://www.cnblogs.com/suflowers1700218/p/14230852.html
使用ajax上传文件
最新发布
jiurikeai的博客
03-28 277
使用ajax上传文件，入参需要附带的额外参数 * 创建一个formData对象实例，将需要的参数append进去 * processData: false, contentType: false,这两个属性是必加的，ajax会对数据及contentType做修改，阻止修改。var formData = new FormData();formData.append('file', file)
关于真正的Ajax方式上传文件
weixin_30553837的博客
08-01 333
用到两个对象 第一个对象：FormData 第二个对象：XMLHttpRequest 目前新版的Firefox 与 Chrome 等支持HTML5的浏览器完美的支持这两个对象，但IE9尚未支持 FormData 对象，还在用IE6 ? 只能仰天长叹.... 有了这两个对象，我们可以真正的实现Ajax方式上传文件。 示例代码： <!DOCTYPE html> <h...
解决Ajax方式上传文件报错"Uncaught TypeError: Illegal invocation"
10-16
主要介绍了Ajax方式上传文件报错"Uncaught TypeError: Illegal invocation"，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
通过Ajax方式上传文件使用FormData进行Ajax请求
10-21
主要介绍了通过Ajax方式上传文件使用FormData进行Ajax请求的相关资料,需要的朋友可以参考下
解决Ajax方式上传文件报错”Uncaught TypeError: Illegal invocation”
12-11
今天使用ajax上传文件时，出现了错误。数据传输的方式是通过定义formData完成的，提交的文件对象也设置为dom对象，但是还是不能发送请求。F12看到后台报了个错误：Uncaught TypeError: Illegal invocation，百度了...
通过Ajax方式上传文件(input file)，使用FormData进行Ajax请求
weixin_30642029的博客
06-26 1110
<div > <input type="file" name="FileUpload" id="FileUpload"> <a class="layui-btn layui-btn-mini" id="btn_uploadimg">上传图片</a&gt...
ajax提交file文件
03-09
用原生的js提交表单
ajax提交file文件,AjaxSubmit()提交file文件
weixin_39960145的博客
08-05 753
之前在网上查了各种方法，想要提交file文件，还要能接收返回值。推荐使用ajaxSubmit()方法。网上的推荐多是这种：$("#formId").submit($(this).ajaxSubmit({url:...,type:...,success:function(){...}});return false;//阻止自动提交);但使用的时候会发现，这样会出现多次提交，第一次请求一次，第二次请求...
如何通过ajax实现同时上传文件及普通表单 - 一文了解FormData
bug处理进行时
09-10 4075
使用键值对的方式模拟表单控件，可以使用XML HttpRequest的send()方法来异步提交表单数据。
ajaxFileUpload简单上传
weixin_52018046的博客
02-17 376
" id="fileText" onclick="text_click()" />上传文件的方式有很多，最近在做项目的时候，一开始也试用了利用jquery的插件ajaxFileUpload来上传大文件，下面，用一个上传文件的简单例子，记录下，学习的过程~~~System.out.println("上传文件"+uploadFileName+",大小："+(upload.length()/1024/1024)+"M");fileElementId: "upload", //type="file"的id。
AJAX参数和file文件一起提交
weixin_43946756的博客
04-01 1753
很多时候，我们需要在提交参数和上传file文件，其实不用form表单用ajax也可以实现 如下图：参数和文件一起提交 html <div class="body"> <p> <span class="form-title" style="">推送类型</span> <input type="radio" onclick="remote_push()" name="push_type" value="0"
使用Ajax上传File
qq_42799562的博客
04-16 555
使用Ajax上传File一、创建布局(Bootstrap)1.1 创建一个简单表单1.2 创建一个上传控制器二、编写ajax2.1 验证serialize传参2.1 通过FormData序列化 一、创建布局(Bootstrap) 1.1 创建一个简单表单 <form id="myForm" enctype="multipart/form-data" onsubmit="return save()"> <div class="form-group"> <l
上传文件—ajax
m0_73605639的博客
04-03 5938
formdata三步走1 获取表单元素2 创建formdata 将表单元素传入3 send（）传入服务器// 将用户选择的文件，添加到 FormData 中。
Ajax文件上传
liangaoyun的博客
01-11 6209
FormData FormData是浏览器提供的一个WebAPI，以键值对的方式存储数据。 FormData + Ajax 技术实现文件上传的功能。 注意：Ajax 实现文件上传的时候，请求体的编码格式必须是 multipart/form-data。 FormData上传文件的格式为二进制 FormData + axios 向服务器提交普通的数据 FormData 是一个构造函数，new FormData() 即可得到 FormData 对象： let fd = new Fo...
解决ajax方式上传文件报错”uncaught typeerror: illegal invocation”
08-31
在使用Ajax方式上传文件时报错"Uncaught TypeError: Illegal invocation"错误可能是因为在处理文件上传时，没有正确设置相关参数或调用方法错误。下面是一些可能导致此错误的原因和解决方法： 1. 使用FormData对象...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值