精华内容
参与话题
问答
  • 通过Ajax方式上传文件

    千次阅读 2017-08-15 09:10:10
    通过传统的form表单提交的方式上传文件: Html代码  form id= "uploadForm" action= "http://localhost:8080/cfJAX_RS/rest/file/upload" method= "post" enctype ="multipart/form-data">  ...
    通过传统的form表单提交的方式上传文件:
    Html代码  收藏代码
    1. <form id"uploadForm" action"http://localhost:8080/cfJAX_RS/rest/file/upload" method"post" enctype ="multipart/form-data">  
    2.      <h1 >测试通过Rest接口上传文件 </h1>  
    3.      <p >指定文件名: <input type ="text" name="filename" /></p>  
    4.      <p >上传文件: <input type ="file" name="file" /></p>  
    5.      <p >关键字1: <input type ="text" name="keyword" /></p>  
    6.      <p >关键字2: <input type ="text" name="keyword" /></p>  
    7.      <p >关键字3: <input type ="text" name="keyword" /></p>  
    8.      <input type ="submit" value="上传"/>  
    9. </form>  

     

    不过传统的form表单提交会导致页面刷新,但是在有些情况下,我们不希望页面被刷新,这种时候我们都是使用Ajax的方式进行请求的:
    Js代码  收藏代码
    1. $.ajax({  
    2.      url : "http://localhost:8080/STS/rest/user",  
    3.      type : "POST",  
    4.      data : $( '#postForm').serialize(),  
    5.      success : function(data) {  
    6.           $( '#serverResponse').html(data);  
    7.      },  
    8.      error : function(data) {  
    9.           $( '#serverResponse').html(data.status + " : " + data.statusText + " : " + data.responseText);  
    10.      }  
    11. });  

     

    如上,通过$('#postForm').serialize()可以对form表单进行序列化,从而将form表单中的所有参数传递到服务端。
     
    但是上述方式,只能传递一般的参数,上传文件的文件流是无法被序列化并传递的。
    不过如今主流浏览器都开始支持一个叫做FormData的对象,有了这个FormData,我们就可以轻松地使用Ajax方式进行文件上传了。

    关于FormData及其用法


    FormData是什么呢?我们来看看Mozilla上的介绍。
    XMLHttpRequest Level 2添加了一个新的接口FormData.利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的send()方法来异步的提交这个"表单".比起普通的ajax,使用FormData的最大优点就是我们可以异步上传一个二进制文件. 
     
    所有主流浏览器的较新版本都已经支持这个对象了,比如Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+。
     
    参见:https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/FormData

     

     

    这里只展示一个通过from表单来初始化FormData的方式
    <form enctype="multipart/form-data" method="post" name="fileinfo">
    Js代码  收藏代码
    1. var oData = new FormData(document.forms.namedItem("fileinfo" ));  
    2. oData.append( "CustomField""This is some extra data" );  
    3. var oReq = new XMLHttpRequest();  
    4. oReq.open( "POST""stash.php" , true );  
    5. oReq.onload = function(oEvent) {  
    6.       if (oReq.status == 200) {  
    7.           oOutput.innerHTML = "Uploaded!" ;  
    8.      } else {  
    9.           oOutput.innerHTML = "Error " + oReq.status + " occurred uploading your file.<br \/>";  
    10.      }  
    11. };  
    12. oReq.send(oData);  

     

     
     
    使用FormData,进行Ajax请求并上传文件

    这里使用JQuery,但是老版本的JQuery比如1.2是不支持的,最好使用2.0或更新版本:
    Html代码  收藏代码
    1. <form id"uploadForm">  
    2.       <p >指定文件名: <input type="text" name="filename" value""/></p >  
    3.       <p >上传文件: <input type="file" name="file"/></ p>  
    4.       <input type="button" value="上传" onclick="doUpload()" />  
    5. </form>  

     

    Js代码  收藏代码
    1. function doUpload() {  
    2.      var formData = new FormData($( "#uploadForm" )[0]);  
    3.      $.ajax({  
    4.           url: 'http://localhost:8080/cfJAX_RS/rest/file/upload' ,  
    5.           type: 'POST',  
    6.           data: formData,  
    7.           async: false,  
    8.           cache: false,  
    9.           contentType: false,  
    10.           processData: false,  
    11.           success: function (returndata) {  
    12.               alert(returndata);  
    13.           },  
    14.           error: function (returndata) {  
    15.               alert(returndata);  
    16.           }  
    17.      });  
    18. }  

    展开全文
  • Ajax实现文件上传

    万次阅读 2018-08-10 18:37:04
    Ajax实现文件上传时通过FormData实现的 FormData  概述 FormData类型其实是在XMLHttpRequest 2级定义的,它是为序列化表以及创建与表单格式相同的数据(当然是用于XHR传输)提供便利。  构造函数 创建一个...

    Ajax实现文件上传时通过FormData实现的

    FormData

     概述

    FormData类型其实是在XMLHttpRequest 2级定义的,它是为序列化表以及创建与表单格式相同的数据(当然是用于XHR传输)提供便利。

     构造函数

    创建一个formData对象实例有几种方式

    1、创建一个空对象实例

    var formData = new FormData();

    此时可以调用append()方法来添加数据

    这里简单的介绍一下FormData,有兴趣的朋友可以自己私下看看;

     下面给大家介绍两种实现文件上传 

    1:没使用插件,单个文件的上传(注意:ajax实现文件上传的话用到的是:绝对路径

    <!DOCTYPE html> 
    <html> 
    <head lang="en"> 
     <meta charset="UTF-8"> 
     <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script> 
     <title></title> 
    </head> 
    <body> 
           <form id="uploadForm" enctype="multipart/form-data"> 
                 文件:<input id="file" type="file" name="file"/> 
           </form> 
                <button id="upload">上传文件</button> 
    </body> 
          <script type="text/javascript"> 
                 $(function () { 
                   $("#upload").click(function () { 
                   var formData = new FormData($('#uploadForm')[0]); 
                    $.ajax({ 
                    type: 'post', 
                    url: "http://192.168.1.101:8080/springbootdemo/file/upload", //上传文件的请求路径必须是绝对路劲
                    data: formData, 
                    cache: false, 
                    processData: false, 
                    contentType: false, 
                }).success(function (data) { 
                    alert(data); 
               }).error(function () { 
                    alert("上传失败"); 
           }); 
        }); 
     }); 
    </script> 
    </html>

    2:Ajax实现多文件的上传 (这个是多选上传,关键是multiple="multiple"这个属性,另外使用的接口也是多文件上传的接口

    <!DOCTYPE html> 
    <html> 
    <head lang="en"> 
     <meta charset="UTF-8"> 
     <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script> 
     <title></title> 
    </head> 
    <body> 
            <form id="uploadForm" enctype="multipart/form-data"> 
                 文件:<input type="file" name="file" multiple="multiple"/><br> 
            </form> 
                <button id="upload">上传文件</button> 
    </body> 
    <script type="text/javascript"> 
             $(function () { 
                 $("#upload").click(function () { 
                  var formData = new FormData($('#uploadForm')[0]); 
              $.ajax({ 
              type: 'post', 
                  url: "http://192.168.1.101:8080/springbootdemo/file/uploadFiles", 
                  data: formData, 
                  cache: false, 
                  processData: false, 
                  contentType: false, 
             }).success(function (data) { 
                alert(data); 
             }).error(function () { 
                 alert("上传失败"); 
              }); 
         }); 
     }); 
    </script> 
    </html>

    这边都是前端代码,后台代码也之间简单的文件上传用法一样。

    展开全文
  • jQuery+ajax实现文件上传

    万次阅读 多人点赞 2018-08-30 11:20:30
    我在写jQuery接口上传文件的时候,遇到一个特头疼的问题,那就是上传图片,刚开始那我以为一个简单的form表单就搞定了,没想到写了两个小时都没写出来,心情那个烦躁啊,有一种想砸电脑的冲动,最后那我就用下面的...

    jQuery+ajax实现文件上传

    我在写jQuery接口上传文件的时候,遇到一个特头疼的问题,那就是上传图片,刚开始那我以为一个简单的form表单就搞定了,没想到写了两个小时都没写出来,心情那个烦躁啊,有一种想砸电脑的冲动,最后那我就用下面的方法实现了这个功能,突然发现好简单,分享给大家!废话不多说,直接上干货,代码走起。。。。

    代码块

    html代码段
    <input type="file" name="photo" id="photo" value="" placeholder="免冠照片">
    <input type="button" onclick="postData();" value="下一步" name="" style="width:100px;height:30px;">
    jQuery代码段
    <script type="text/javascript">
    function postData(){
        var formData = new FormData();
        formData.append("photo",$("#photo")[0].files[0]);
        formData.append("service",'App.Passion.UploadFile');
        formData.append("token",token);
        $.ajax({
            url:'http://www.baidu.com/', /*接口域名地址*/
            type:'post',
            data: formData,
            contentType: false,
            processData: false,
            success:function(res){
                console.log(res.data);
                if(res.data["code"]=="succ"){
                    alert('成功');
                }else if(res.data["code"]=="err"){
                    alert('失败');
                }else{
                    console.log(res);
                }
            }
        })
    }
    展开全文
  • ajax文件上传

    千次阅读 2019-04-24 10:07:08
    表单上传文件 传统的文件上传是通过form表单,俗话说不关注实际问题的解决方法都是假把式,那么我就模拟一个用户注册的功能。 观察如下代码: [HttpPost] public ActionResult Upload(string username, string ...

    表单上传文件

    传统的文件上传是通过form表单,俗话说不关注实际问题的解决方法都是假把式,那么我就模拟一个用户注册的功能。
    观察如下代码:

    [HttpPost]
    public ActionResult Upload(string username, string password, string realName, string address, HttpPostedFileBase picture)
    {
        //保存文件
        string fileName = Guid.NewGuid().ToString() + ".png";
        var realPath = Server.MapPath("/Upload/" + fileName);
        picture.SaveAs(realPath);
    
        //更新数据库
        using(SqlConnection conn = new SqlConnection("Data Source=DESKTOP-2HL1HGR\\SQL2014;Initial Catalog=TestDemo;Integrated Security=True"))
        {
            conn.Open();
            string sql = string.Format("INSERT INTO tb_user (Username, Password, RealName, Address, FileName) VALUES ('{0}', '{1}', '{2}', '{3}', '{4}')",
                username, password, realName, address, fileName);
            SqlCommand cmd = new SqlCommand(sql, conn);
            int result = cmd.ExecuteNonQuery();
            if(result > 0)
            {
                return Json("Success");
            }else
            {
                return Json("Fail");
            }
        }
    }
    
    <h1>用户注册</h1>
    <form action="/Test/Upload" method="post" enctype="multipart/form-data">
        <table class="table table-hover">
            <tr>
                <td><b>用户名称</b></td>
                <td><input type="text" id="username" name="username" class="form-control" /></td>
            </tr>
            <tr>
                <td><b>用户密码</b></td>
                <td><input type="password" id="password" name="password" class="form-control" /></td>
            </tr>
            <tr>
                <td><b>真实姓名</b></td>
                <td><input type="text" id="realName" name="realName" class="form-control" /></td>
            </tr>
            <tr>
                <td><b>家庭住址</b></td>
                <td><input type="text" id="address" name="address" class="form-control" /></td>
            </tr>
            <tr>
                <td><b>用户头像</b></td>
                <td><input type="file" id="picture" name="picture" class="form-control" /></td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="submit" id="btnEdit" class="btn btn-primary" value="注册" />
                    <input type="reset" class="btn btn-danger" value="重置" />
                </td>
            </tr>
        </table>
    </form>
    

    在这里插入图片描述
    在这里插入图片描述
    通过表单可以顺利的上传文件,但是这样有个很明显的缺陷就是不能在页面上执行回调函数,所以我们一般采用ajax的方式进行文件上传。

    ajax文件上传

    为了方便传参我们定义一个模型类User

    public class User
    {
        public int Id { get; set; }
        public string Username { get; set; }
        public string Password { get; set; }
        public string RealName { get; set; }
        public string Address { get; set; }
    }
    

    然后控制类的方法中就把参数定义为User和file即可

    [HttpPost]
    public ActionResult Upload(User user, HttpPostedFileBase FileName)
    {
        //保存文件
        string fileName = Guid.NewGuid().ToString() + ".png";
        var realPath = Server.MapPath("/Upload/" + fileName);
        FileName.SaveAs(realPath);
        //更新数据库
        using (SqlConnection conn = new SqlConnection("Data Source=DESKTOP-2HL1HGR\\SQL2014;Initial Catalog=TestDemo;Integrated Security=True"))
        {
            conn.Open();
            string sql = string.Format("INSERT INTO tb_user (Username, Password, RealName, Address, FileName) VALUES ('{0}', '{1}', '{2}', '{3}', '{4}')",
                user.Username, user.Password, user.RealName, user.Address, fileName);
            SqlCommand cmd = new SqlCommand(sql, conn);
            int result = cmd.ExecuteNonQuery();
            if(result > 0)
            {
                return Json("Success");
            }else
            {
                return Json("Fail");
            }
        }
    }
    

    重点就是前台方法需要实例化一个FormData类,用于存放表单的数据,同时要在ajax中设置processData和contentType为false,否则不会跳转到后台控制层。

    <h1>用户注册</h1>
    <form id="form1">
        <table class="table table-hover">
            <tr>
                <td><b>用户名称</b></td>
                <td><input type="text" id="Username" name="Username" class="form-control" /></td>
            </tr>
            <tr>
                <td><b>用户密码</b></td>
                <td><input type="password" id="Password" name="Password" class="form-control" /></td>
            </tr>
            <tr>
                <td><b>真实姓名</b></td>
                <td><input type="text" id="RealName" name="RealName" class="form-control" /></td>
            </tr>
            <tr>
                <td><b>家庭住址</b></td>
                <td><input type="text" id="Address" name="Address" class="form-control" /></td>
            </tr>
            <tr>
                <td><b>用户头像</b></td>
                <td>
                    <input type="file" id="FileName" name="FileName" class="form-control" />
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="button" id="btnConfirm" class="btn btn-primary" value="注册" />
                    <input type="reset" class="btn btn-danger" value="重置" />
                </td>
            </tr>
        </table>
    </form>
    <script>
        $(function () {
            $("#btnConfirm").click(function () {
                var formData = new FormData();
                formData.append("Username", $("#Username").val());
                formData.append("Password", $("#Password").val());
                formData.append("RealName", $("#RealName").val());
                formData.append("Address", $("#Address").val());
                formData.append("FileName", $("#FileName")[0].files[0]);
                $.ajax({
                    url: "/Test/Upload",
                    type: "post",
                    dataType: "json",
                    data: formData,
                    processData: false, // 告诉jQuery不要去处理发送的数据,用于对data参数进行序列化处理 这里必须false
                    contentType: false, // 告诉jQuery不要去设置Content-Type请求头
                    success: function (result) {
                        if (result == "Success") {
                            console.log("注册成功!");
                        } else {
                            console.log("注册失败!");
                        }
                    }
                })
            })
        })
    </script>
    

    执行结果
    点击注册之后
    在这里插入图片描述
    在Upload文件夹之中
    在这里插入图片描述
    查看数据库
    在这里插入图片描述

    数据库图片取出

    我在数据库中的图片是一个路径,准确的说是一个文件名,因为我的图片都是存在项目目录的Upload文件夹之中的,所以我们在取出图片的时候,可以先自己写个文件路径前缀,加上数据库的文件名就可以正常取出了。

    [HttpPost]
    public ActionResult GetImg()
    {
        using (SqlConnection conn = new SqlConnection("Data Source=DESKTOP-2HL1HGR\\SQL2014;Initial Catalog=TestDemo;Integrated Security=True"))
        {
            conn.Open();
            string sql = "SELECT FileName FROM tb_user WHERE Id=1";
            SqlCommand cmd = new SqlCommand(sql, conn);
            return Json(cmd.ExecuteScalar().ToString());
        }
    }
    
    <h2>Index2</h2>
    <div id="showImg">
    </div>
    <script>
        $(function () {
            $.ajax({
                type: "post",
                url: "/Test/GetImg",
                dataType: "json",
                success: function (result) {
                    var htmlStr = "<img src='/Upload/" + result + "'>";
                    $("#showImg").empty().append(htmlStr);
                }
            })
        })
    </script>
    

    执行结果
    在这里插入图片描述

    展开全文
  • AJAX POST方式上传文件到后台和下载后台传来的文件

    万次阅读 热门讨论 2018-07-30 16:42:01
    原本ajax是不能下载文件的,原因:因为response,一般请求浏览器是会处理服务器输出的response,例如生成png、文件下载等,然而ajax请求只是个“字符型”的请求,即请求的内容是以文本类型存放的。文件的下载是以二...
  • AJAX上传文件

    2019-01-27 21:08:48
    简易版: var fileList = $("#fileUpload")[0].files; //创建formdata表单对象 var formData = new FormData(); ...* 将文件添加到form表单中 ...//获取文件本身 ... // 将文件上传至服务器 $.ajax({ ...
  • ajax如何上传文件

    2020-06-14 08:53:23
    怎么用ajax上传文件?2. FormData是什么?3. FormData+ajax上传文件的注意事项?二、文件的上传(表单上传和ajax文件异步上传)三、注意 一、总结 1. 怎么用ajax上传文件? 使用FormData,FormData+ajax即可异步...
  • ajax以及文件上传的几种方式

    千次阅读 2019-05-22 14:58:00
    AJAX准备知识:JSON 什么是 JSON ? JSON 指的是 JavaScript 对象表示法(JavaScriptObjectNotation) JSON 是轻量级的文本数据交换格式 JSON 独立于语言* JSON 具有自我描述性,更易理解 *JSON 使用 ...
  • 使用ajax实现文件上传

    万次阅读 2018-11-27 20:02:28
    记忆不太好,在这里写一写利用ajax实现文件上传.方便以后查看,正好和大家分享分享… 直接上代码吧! html代码: &lt;input type="file" name="fileName1" id="fileName1"/&gt; &...
  • 使用ajaxfileupload.js实现上传文件功能

    万次阅读 热门讨论 2016-07-09 14:54:50
    一、ajaxFileUpload是一个异步上传文件的jQuery插件。  语法:$.ajaxFileUpload([options])  options参数说明: 1、url 上传处理程序地址 2、fileElementId 文件选择框的id属性,即的id 3、secureuri 是否启用...
  • jquery form插件ajax上传文件的原理, 1、浏览器实现了XMLHttpRequest level2规范的,则使用xhr直接提交文件。通常来说chrome、firefox都实现了xhr level2规范 2、浏览器只实现了XMLHttpRequest level2规范的,则...
  • Ajax上传文件

    千次阅读 2012-08-25 20:30:47
    Ajax上传文件  2011-09-24 11:53:44| 分类:默认分类 | 标签:|字号大中小订阅 首先要说的就是 ajax 是无法实现上传文件的,可以想一下ajax与后台通信都是通过传递字符串,怎么能传递文件呢?其实出于...
  • Ajax上传文件(原生JS篇)

    千次阅读 2017-10-13 20:32:25
    工作中用到了Ajax上传文件的情景 之前自己不知道ajax可以传 通过文档发现XHR2.0已经支持了 但需要集合ForData目录结构 test 一级 files 二级 index.html 二级 saveFiles.php 二级示例(根据上传文件的进度...
  • Jquery+ajax上传文件

    2019-08-30 09:00:46
    之前做文件操作都是直接通过表单提交的,这几天做了一个前台用jquery+ajax上传文件,后台用MVC接受文件,由于第一次用jquery+ajax做上传文件,所以用来写个博客。方便以后直接用。 上代码: //表单 <form ...
  • ajax上传文件

    千次阅读 2013-11-11 17:16:11
    我做了一个校验 ,想用ajax进行文件的验证,这时候就需要使用ajax上传文件进行验证   首先需要 一个js包  jquery 和 ajaxfileupload.js ajaxfileupload 下载地址 :   使用方法: 前台js $("#submitbtn")....
  • php+ajax上传文件

    千次阅读 2017-08-02 09:52:47
    php和ajax合作无刷新上传文件 使用php上传中文和英文文件,上传文件有限制,详见代码,自己可以添加删除。 已解决上传中文乱码问题,保存时以源文件名存储。
  • jsp通过ajax上传文件,基于jquery

    千次阅读 2018-12-10 00:30:37
    推荐讲解:HTML5+Ajax上传文件 建议:看这篇之前,请先了解直接form表单提交servlet方式上传文件 jsp上传文件到服务器,因为我下面servlet用的文件上传方式在里面有讲解,所以此篇不赘述。 #案例 前端jsp代码: ...
  • Ajax上传文件

    2016-12-15 16:04:44
    Ajax上传文件
  • Ajax上传文件及携带参数

    千次阅读 2018-10-22 10:53:43
    HTML代码 &amp;amp;lt;div class=&amp;quot;form-group&amp;quot;&amp;amp;gt; &amp;amp;lt;label class=&...文件上传&amp;amp;lt;/label&amp;amp;gt; &amp;amp;l
  • AJAX上传文件,控制文件大小,格式

    万次阅读 2017-07-04 15:18:42
    如何利用AJAX进行文件上传,并对上传内容进行限制,在项目中总会遇见这样的问题,下面就为大家举个栗子。 HTML代码 //enctype必须要设置为multipart/form-data ...

空空如也

1 2 3 4 5 ... 20
收藏数 76,520
精华内容 30,608
关键字:

ajax上传文件