使用jquery和ajax怎么上传文件

本篇文章为大家展示了使用jquery和ajax怎么上传文件,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。

十余年的鄂伦春网站建设经验,针对设计、前端、开发、售后、文案、推广等六对一服务,响应快,48小时及时工作处理。营销型网站建设的优势是能够根据用户设备显示端的尺寸不同,自动调整鄂伦春建站的显示方式,使网站能够适用不同显示终端,在浏览器中调整网站的宽度,无论在任何一种浏览器上浏览网站,都能展现优雅布局与设计,从而大程度地提升浏览体验。成都创新互联公司从事“鄂伦春网站设计”,“鄂伦春网站推广”以来,每个客户项目都认真落实执行。

什么是ajax

ajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术,可以通过在后台与服务器进行少量数据交换,使网页实现异步更新。

一、单文件上传

 
 
 
  
  
  
 
 
 
 文件: 
 
上传文件 
 
 
 $(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("上传失败"); 
  }); 
 }); 
 }); 
 

二、多文件上传

 
 
 
  
  
  
 
 
 
 文件:
    上传文件       $(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("上传失败");    });   });   });   

这个是多选上传,关键是multiple="multiple"这个属性,另外使用的接口也是多文件上传的接口。

当然也可以使用单文件上传的模式,多次选择就可以了,只不过接口也是iyaoshiyong多文件上传的接口。

 
 
 
  
  
  
 
 
 
 文件:
   文件:
   文件:
    上传文件       $(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("上传失败");    });   });   });   

测试都通过了!!!

下面通过一段实例代码给大家介绍ajax拖拽上传功能的实现,具体代码如下;

AJAX拖拽上传功能,实现代码如下所示:




 
 
 
 Document
 


 +
  //server.php

上述内容就是使用jquery和ajax怎么上传文件,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注创新互联行业资讯频道。


网页标题:使用jquery和ajax怎么上传文件
网站URL:http://pwwzsj.com/article/gehhjo.html

其他资讯