ajax异步实现文件分片上传实例代码_AJAX相关

来源:脚本之家  责任编辑:小易  

(1).aspx 普通web窗体页。删除aspx页面中 html代码,只保留第一行。在后置32313133353236313431303231363533e58685e5aeb931333330356334代码页 .aspx.cs 中写对应的方法代码。前台调用:// 异步调用页面url,参数组,返回执行事件 $.post("AjaxPage.aspx" , { type:'getData01' },function(re){$('#re_method01').html(re);});复制代码(2)单独.aspx 页(新建的时候不勾选 “将代码放在单独的文件中”) + 任意.cs文件(需要继承System.Web.UI.Page) .aspx文件中代码 <%@ Page Inherits="命名空间.类" %>(3).ashx页面这里主要知识点就是继承了IHttpHandler接口。来实现Http web相关的事件处理。实现方法:新建后注销掉context.Response.Write("Hello World");改为你的事件处理代码即可。1,2,3的前台ajax调用方法都一样。如果需要区分不同的ajax调用。我们可以传递一个不同值的 type 参数。后台再通过switch执行各自的处理程序。(4)利用System.Web.Services.WebMethodAttribute。在(1)的基础上引用命名空间using System.Web.Services;然后在需要异步执行的方法上添加[WebMethod]属性。 [WebMethod]publicstaticstring HandleEvent01(string para,string para2){//code...return"YOUR DATA";}复制代码前台调用代码: $.ajax({type: "POST",contentType: "application/json",url: "AjaxWebService.aspx/HandleEvent01", //调用WebService的地址和方法名称组合 ---- WsURL/方法名 data: "{'para':'bill','para2':'28'}", //这里是要传递的参数,注意参数名跟后台方法参数名的对应 dataType: 'json', //WebService 返回Json类型 或者 Json/string success: function(re) {publicstaticstring HandleEvent01(){//code...return"some words";}[WebMethod]publicstatic Person AjaxMethodThree(string para){returnnew Person { Name = "bill", Country = "China", Favor = newstring[] { "Box", "Music", "Football" } };}[WebMethod]publicstatic List<Person> AjaxMethodTwo(string para){List<Person> personlist = new List<Person>();personlist.Add(new Person { Name = "bill", Country = "China", Favor = newstring[] { "Box1", "Film1", "Football1" } });personlist.Add(new Person { Name = "tom", Country = "USA", Favor = newstring[] { "Box2", "Music2", "Football2" } });personlist.Add(new Person { Name = "lucy", Country = "Korea", Favor = newstring[] { "Box3", "Music3", "Football3" } });return personlist;}//定义一个Person对象publicclass Person{publicstring Name { get; set; }publicstring Country { get; set; }publicstring[] Favor { get; set; }}复制代码1.返回字符串json:{"d":"字符串"}2.返回类型为自定义对象, 前端返回值为一个对应的JSON对象json:{"d":{"name1":"value1","name2":"value2"...}}3,返回类型为泛型列表, 前端返回值为对应的JSON对象数组。如果我们异步就是需要返回json格式数据,这样就很方便。同时,除了以WebService的方式被调用,这个页面也可以以普通URL的方式来异步访问,也就是(1)的情况。(5)调用WebService添加web 服务。会生成一个WebServicexxx.asmx以及WebServicexxx.cs.异步程序在WebServicexxx.cs中实现,基本跟(4)差不多。 (6)MVC中的ajax异步实现1.直接在控制器中写public string Ajax(){return "re";}方法,不用额外建视图文件。2.或者你要返回的内容结构还比较复杂,新建一个_Ajax.cshtml分部视图。控制器中代码:public ActionResult Ajax(){//...your code...return PartialView("_Ajax");}复制代码前台调用代码: $.post("/控制器名/ajax" , { type:'getData01' },function(re){});复制代码上面的代码整理到了一个项目里 代码下载www.zgxue.com防采集请勿采集本网。

前言

使用Ajax上传文件的应用场景颇多,比如上传用户头像、博客文章中插入图片、对认证用户相关身份进行校验等等很多很多。这篇文章主要介绍了关于ajax异步实现文件分片上传的相关内容,下面话不多说了,来一起看看详细的介绍吧

上传的文件是没有办法和表单内容一起异步的,可考虑使用jquery的ajaxfileupload,或是其他的插件,异步上传文件后,然后再对表单进行操作。

实例代码:

HTTP File Server http-file-server 是用 python 实现的 HTTP 文件服务器,支持上传和下载文件。 运行 $ python file-server.py files 8001 其中第一个参数 files 是存放文件的路径,第二个参数 8001 是 HTTP 服务器端口。 接口 1. 读取文件 GET

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>JS分片上传-极速上传</title></head><body> <input type="file" name="slice" id="slice" > <div id="output"><!-- 信息存放地 --> </div><br/></body><script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script><script type="text/javascript"> $("#slice").change(function(event) { var file = $("#slice")[0].files[0];var name = file.name;//进行初始化$.ajax({ type:"POST", //请求方式 url:"http://localhost:8080/getuploadId",async: false, dataType:"json", //返回数据类型 data:{//请求参数 fileName:name, }, success:function(data){ //请求成功后 console.log("data.code="+JSON.stringify(data));console.log("data.data.objectName="+data.data.objectName);console.log("data.data.uploadId="+data.data.uploadId);var objectName=data.data.objectName;var uploadId=data.data.uploadId;//成功后执行分段上传PostFile(file,0,objectName,uploadId);//合并combineFile(objectName,uploadId); }, error:function (){ alert("系统出现异常!"); flag=false; } }); }); //执行分片上传 function PostFile(file,i,objectName,uploadId){ var name = file.name, //文件名 size = file.size, //总大小shardSize = 2 * 1024 * 1024, shardSize = 1 * 1024 * 1024, //以2MB为一个分片,每个分片的大小 shardCount = Math.ceil(size / shardSize); //总片数 if(i >= shardCount){ return; } //console.log(size,i+1,shardSize); //文件总大小,第一次,分片大小// var start = i * shardSize; var end = start + shardSize; var packet = file.slice(start, end); //将文件进行切片// 分段号var partNumber = i + 1; /* 构建form表单进行提交 */ var form = new FormData(); form.append("fileId", '001') form.append("data", packet); //slice方法用于切出文件的一部分// form.append("lastModified", file.lastModified); //最后的额修改时间 form.append("name", name); form.append("totalSize", size);form.append("uploadId", uploadId);form.append("objectName", objectName);form.append("mainFile", packet);form.append("total", shardCount);form.append("sortNumber", partNumber);//uploadId:uploadId,//objectName:objectName,//mainFile:blob,//total:partCount,//sortNumber:partNumber if(shardCount === i+1){ shardSize = size - i * shardSize } form.append("shardSize", shardSize); form.append("total", shardCount); //总片数 form.append("index", i + 1); //当前是第几片 $.ajax({ // header: { // web_token: "cpBvqWrr0UK9zPJoKj+412alxxcY6qFwrSVoO0juZg0S1jX/sGfMd9oi3AsSxW+MdWFrwtGCykUTmMqrqpbCElmT75DfB87lENC7lCuMxgF0d5wQB6yAubUVyGOzhbrScvIfD8ZSjOJ3D88AOy2xRd4oG8TxeGoMoZqnqIwjKg=" // }, url: "http://localhost:8080/multipartupload", type: "POST", data: form, //timeout:"10000", //超时10秒 async: false, //同步 dataType:"json", processData: false, //很重要,告诉jquery不要对form进行处理 contentType: false, //很重要,指定为false才能形成正确的Content-Type success: function (data) { console.log("data="+JSON.stringify(data)); /* 表示上一块文件上传成功,继续下一次 */ if (data.data.code == 1) { form = ''; i++; PostFile(file, i,objectName,uploadId); } else if (data.data.code == 502) { form = ''; /* 失败后,每2秒继续传一次分片文件 */ setInterval(function () { PostFile(file, i,objectName,uploadId) }, 2000); } else if (data.data.code == 200) { console.log("上传成功"); } else if (data.data.code == 500) { console.log('第'+msg.i+'次,上传文件有误!'); } else { console.log('未知错误'); } } }) }//合并function combineFile(objectName,uploadId){console.log("objectName="+objectName);console.log("uploadId="+uploadId);var object=new Object();object.objectName=objectName;object.uploadId=uploadId; $.ajax({ headers: {Accept: "application/json; charset=utf-8"},type:"POST", //请求方式 url:"http://localhost:8080/combine",async: false,contentType:"application/json",dataType:"json", //返回数据类型data:JSON.stringify(object),success:function(data){ //请求成功后 console.log("data="+JSON.stringify(data));console.log("data.data.code="+data.data.code);console.log("data.data.url="+data.data.url);},error:function (){alert("系统出现异常!");flag=false;} }); }</script></html>

ajax跨域实现方法之跨子域实现ajax: 要求:实现hello.com的页面 异步请求 blog.hello.com下的页面 实现方法:借助iframe,通过设置iframe的src属性,嵌入blog.hello.com下的一个页面,比如AjaxProxy.jsp,然后由该页面去请求Ajax AjaxProxy请求

总结

到此这篇关于ajax异步实现文件分片上传的文章就介绍到这了,更多相关ajax异步实现文件分片上传内容请搜索真格学网以前的文章或继续浏览下面的相关文章希望大家以后多多支持真格学网! 您可能感兴趣的文章:ajax实现异步文件或图片上传功能ajax图片上传,图片异步上传,更新实例ajax 异步上传带进度条视频并提取缩略图Ajax异步文件上传与NodeJS express服务端处理Ajax异步上传文件实例代码分享ajax实现文件异步上传并回显文件相关信息功能示例jquery中的ajax异步上传Ajax表单异步上传文件实例代码(包括文件域)表单上传功能实现 ajax文件异步上传

你的表述没看懂,jquery 异步上传过后获取路径 直接给img 的src赋值不就完了?

ajaxfileupload实现异步上传的完整例子:JSP页面中62616964757a686964616fe78988e69d8331333339653737引入的script代码:<script> function ajaxFileUpload() { $("#loading").ajaxStart(function(){ $(this).show(); })//开始上传文件时显示一个图片 .ajaxComplete(function(){ $(this).hide(); });//文件上传完成将图片隐藏起来 $.ajaxFileUpload({ url:'AjaxImageUploadAction.action',//用于文件上传的服务器端请求地址 secureuri:false,//一般设置为false fileElementId:'imgfile',//文件上传空间的id属性 <input type="file" id="imgfile" name="file" /> dataType: 'json',//返回值类型 一般设置为json success: function (data, status) //服务器成功响应处理函数 { alert(data.message);//从服务器返回的json中取出message中的数据,其中message为在struts2中定义的成员变量 if(typeof(data.error) != 'undefined') { if(data.error != '') { alert(data.error); }else { alert(data.message); } } }, error: function (data, status, e)//服务器响应失败处理函数 { alert(e); } } ) return false; } </script>struts.xml配置文件中的配置方法:<struts> <package name="struts2" extends="json-default"> <action name="AjaxImageUploadAction" class="com.test.action.ImageUploadAction"> <result type="json" name="success"> <param name="contentType">text/html</param> </result> <result type="json" name="error"> <param name="contentType">text/html</param> </result> </action> </package></struts>上传处理的Action ImageUploadAction.actionpackage com.test.action;import java.io.File;import java.io.FileInputStream;import java.io.FileOutputStream;import java.util.Arrays;import org.apache.struts2.ServletActionContext;import com.opensymphony.xwork2.ActionSupport;@SuppressWarnings("serial")public class ImageUploadAction extends ActionSupport { private File imgfile; private String imgfileFileName; private String imgfileFileContentType; private String message = "你已成功上传文件"; public File getImgfile() { return imgfile; } public void setImgfile(File imgfile) { this.imgfile = imgfile; } public String getImgfileFileName() { return imgfileFileName; } public void setImgfileFileName(String imgfileFileName) { this.imgfileFileName = imgfileFileName; } public String getImgfileFileContentType() { return imgfileFileContentType; } public void setImgfileFileContentType(String imgfileFileContentType) { this.imgfileFileContentType = imgfileFileContentType; } public String getMessage() { return message; } public void setMessage(String message) { this.message = message; } @SuppressWarnings("deprecation")public String execute() throws Exception { String path = ServletActionContext.getRequest().getRealPath("/upload/mri_img_upload"); String[] imgTypes = new String[] { "gif", "jpg", "jpeg", "png","bmp" }; try { File f = this.getImgfile(); String fileExt = this.getImgfileFileName().substring(this.getImgfileFileName().lastIndexOf(".") + 1).toLowerCase(); /* if(this.getImgfileFileName().endsWith(".exe")){ message="上传的文件格式不允许!!!"; return ERROR; }*/ /** * 检测上传文件的扩展名是否合法 * */ if (!Arrays.<String> asList(imgTypes).contains(fileExt)) { message="只能上传 gif,jpg,jpeg,png,bmp等格式的文件!"; return ERROR; } FileInputStream inputStream = new FileInputStream(f); FileOutputStream outputStream = new FileOutputStream(path + "/"+ this.getImgfileFileName()); byte[] buf = new byte[1024]; int length = 0; while ((length = inputStream.read(buf)) != -1) { outputStream.write(buf, 0, length); } inputStream.close(); outputStream.flush(); } catch (Exception e) { e.printStackTrace(); message = "文件上传失败了!!!!"; } return SUCCESS; }},<script type=text/javascript src=js/jquery.js</script<script type=text/javascript src=js/ajaxfileupload.js</script<!-- 执行上传文件e69da5e887aa3231313335323631343130323136353331333335346164操作的函数 --<script type=text/javascriptfunction ajaxFileUpload(){$.ajaxFileUpload({url:'update.do?method=uploader', //需要链接到服务器地址secureuri:false,fileElementId:'houseMaps', //文件选择框的id属性dataType: 'xml', //服务器返回的格式,可以是jsonsuccess: function (data, status) //相当于java中try语句块的用法{$('#result').html('添加成功');},error: function (data, status, e) //相当于java中catch语句块的用法{$('#result').html('添加失败');}});}</script</head<body<form method=post action=update.do?method=uploader enctype=multipart/form-data<input type=file id=houseMaps name=houseMaps/<input type=button value=提交 onclick=ajaxFileUpload()/</form<div id=result</div</body</html服务器代码:public class UpdateAction extends DispatchAction {public ActionForward uploader(ActionMapping mapping, ActionForm form,HttpServletRequest request, HttpServletResponse response) {UpFormForm upFormForm = (UpFormForm) form;FormFile ff = upFormForm.getHouseMaps();try {InputStream is = ff.getInputStream();File file = new File(D:/ + ff.getFileName()); //指定文件存储的路径和文件名OutputStream os = new FileOutputStream(file);byte[] b = new byte[1024];int len = 0;while((len = is.read(b)) != -1){os.write(b, 0, len);}os.close();is.close();} catch (Exception e) {本回答被提问者和网友采纳内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • 切记ajax中要带上antiforgerytoken防止csrf攻击
  • ajax jquery 异步表单验证示例代码
  • 用ajax读取xml文件的简单例子
  • jquery ajax方式上传文件的方法
  • ecshop中实现ajax弹窗登录功能
  • jsp+ajax实现无刷新上传文件的方法
  • ajax.js里面有内容显示效果,根据id
  • 结合ajax进行php开发之入门
  • 使用ajax和history.pushstate无刷新改变页面url示例
  • rails制作rss feed代码
  • jsp中使用jquery的ajaxfileupload插件怎么实现异步...
  • .net ajax 异步调用的几种实现方法(jquery)
  • jsp中使用jquery的ajaxfileupload插件怎么实现异步...
  • java 使用 AjaxUpload.js 实现上传文档的时候需要...
  • ajax怎么提交带文件上传表单
  • 怎么用ajax实现上传文件的功能
  • ajax如何实现跨域上传文件
  • img如何接收jquery ajax异步上传的动态图片
  • 如何用Ajax实现多文件上传
  • ajax jquery 中的 文件上传问题(jsp+java开发)
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全javascriptasp.netphp编程ajax相关正则表达式asp编程jsp编程编程10000问css/htmlflex脚本加解密web2.0xml/rss网页编辑器相关技巧安全相关网页播放器其它综合dart首页ajax实现异步文件或图片上传功能ajax图片上传,图片异步上传,更新实例ajax 异步上传带进度条视频并提取缩略图ajax异步文件上传与nodejs express服务端处理ajax异步上传文件实例代码分享ajax实现文件异步上传并回显文件相关信息功能示例jquery中的ajax异步上传ajax表单异步上传文件实例代码(包括文件域)表单上传功能实现 ajax文件异步上传切记ajax中要带上antiforgerytoken防止csrf攻击ajax jquery 异步表单验证示例代码用ajax读取xml文件的简单例子jquery ajax方式上传文件的方法ecshop中实现ajax弹窗登录功能jsp+ajax实现无刷新上传文件的方法ajax.js里面有内容显示效果,根据id结合ajax进行php开发之入门使用ajax和history.pushstate无刷新改变页面url示例rails制作rss feed代码jquery ajax 向后台传递数组参数ajax readystate的五种状态详解ajax中的async属性值之同步和异步jquery实现ajax定时刷新局部页面ajax传递多个参数具体实现ajax获取数据中文乱码问题最简单jquery ajax中使用serialize()方ajax获取数据然后显示在页面的实自己动手打造ajax图片上传(网上没ajax 缓存问题的两种解决方法(iejs统计网页在线时间的脚本ajax验证数据库内容并将值显示在页面ajax级联菜单实例代码[asp]天枫ajax blog v1.0 程序提供下载了无限分级和tree结构数据增删改【附demo下ajax请求返回的数据看不到回调函数没有执ajax编写简单的登录页面jquery ajax的readystate和status的区别和php ajax无刷新分页,支持id定位
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved