ajax实现文件上传

最新推荐文章于 2024-11-13 01:18:00 发布

weixin_30807677

最新推荐文章于 2024-11-13 01:18:00 发布

阅读量91

点赞数

文章标签： javascript json ViewUI

原文链接：http://www.cnblogs.com/ws1313123/p/6424846.html

版权

对于以模态对话框的方式，实现新增|修改等功能时，在使用ajax提交表单数据的时候，必须考虑表单是否包含文件域。

情况1:不包含文件域

按照$("#form的id").serialize()或者.serializeArray()或者表单数据

然后再使用$.post();

       var formdata = $("#form1").serializeArray();//无法上传文件的
       alert(formdata);
       var url ="<%= request.getContextPath()%>/upload/demo1";
       $.ajax({
           url:url,
           data:formdata, //name=zhangsan&age=50   {}
               contentType: false,//默认: "application/x-www-form-urlencoded"
               processData: false,//设置 processData 选项为 false，防止自动转换数据格式
           type:"post",
           dataType:"json",
           success:function(data){
               alert(data);
           },
           error:function(er){
               alert(er.responseText);
           }
       });

情况2：包含文件域

做法1：使用html5提供的新特性：FormData

           var formdata = new FormData(document.getElementById("form1"));//可以上传文件

       var url ="<%= request.getContextPath()%>/upload/demo1";
       $.ajax({
           url:url,
           data:formdata, //name=zhangsan&age=50   {}
               contentType: false,//默认: "application/x-www-form-urlencoded"
               processData: false,//设置 processData 选项为 false，防止自动转换数据格式
           type:"post",
           dataType:"json",
           success:function(data){
               alert(data);
           },
           error:function(er){
               alert(er.responseText);
           }
       });

做法2：使用jquery.form.js插件

        <script type="text/javascript" src="jquery-1.10.2.js"></script>
   <script type="text/javascript" src="jquery.form.js"></script>

   var url ="<%= request.getContextPath()%>/upload/demo2";

   $("#form1").ajaxSubmit({
            type:'post',
            url:url,
            clearForm:true,//清空所有表单元素的值
            resetForm:true,//重置所有表单元素的值
            success:function(data){
                alert(data);
            },
            error:function(XmlHttpRequest,textStatus,errorThrown){
                alert("上传失败了");
            }
        });