基于jQuery Ajax实现上传文件

本文实例为大家分享了基于jQuery Ajax实现上传文件的关键代码，供大家参考，具体内容如下

JS代码：

//保存
function btnAdd() {
 var formData = new FormData($("#frm")[0]);

 $.ajax({
  url: "/Admin/ContentManage/SaveEdit",
  type: "POST",
  data: formData,
  contentType: false, //必须false才会避开jQuery对 formdata 的默认处理 XMLHttpRequest会对 formdata 进行正确的处理
  processData: false, //必须false才会自动加上正确的Content-Type
  success: function (data) {
   if (data == "OK") {
    alert("保存成功");
    $.iDialog("close"); //刷新父页面
   }
   else {
    alert("保存失败：" + data);
   }
  }
 });
}

ASP.NET MVC后台代码：

//首先判断路径是否存在,不存在则创建路径
string path = Path.Combine(System.Configuration.ConfigurationManager.AppSettings["UploadsFiles"], folder + "/" + DateTime.Now.ToString("yyyyMMdd") + "/");
string physicalPath = server.MapPath(path);
if (!Directory.Exists(physicalPath))
{
 Directory.CreateDirectory(physicalPath);
}

HttpPostedFileBase file = request.Files[0];
string newFileName = Guid.NewGuid().ToString().Replace("-", "") + Path.GetExtension(file.FileName);
string savePath = Path.Combine(physicalPath, newFileName);
file.SaveAs(savePath);
fileName = file.FileName;
string url = Path.Combine(path, newFileName);
return url;

更多精彩内容，请点击《jQuery上传操作汇总》，进行深入学习和研究。

以上就是本文的全部内容，希望对大家的学习有所帮助。

赞 (0)

相关推荐

  • jQuery插件ajaxfileupload.js实现上传文件

    jQuery插件ajaxfileupload.js实现上传文件

    AjaxUpLoad.js的使用实现无刷新文件上传,如图 1.创建页面并编写HTML 上传文档: <div class="uploadFile"> <span id="doc"><input type="text" disabled="disabled" /></span> <input type="hidden" id="hidFileNam

  • PHP结合jQuery插件ajaxFileUpload实现异步上传文件实例

    PHP结合jQuery插件ajaxFileUpload实现异步上传文件实例

    平时用的比较多的JQuery图片上传插件是Uploadify这个插件,效果很不错,但是由于手机不支持flash,所以不得不再找一个文件上传插件来用了.后来发现ajaxFileUpload这个插件挺不错,所以就用这个插件来做异步上传文件的效果.网上也有很多对ajaxFileUpload插件的使用的文章,不过我发现没有PHP版,所以这次服务器那边的处理就使用PHP语言来处理. 一.详解ajaxFileUpload插件的语法参数 原理:ajaxfileupload是通过监听iframe的onload方

  • jQuery异步上传文件插件ajaxFileUpload详细介绍

    一.ajaxFileUpload是一个异步上传文件的jQuery插件. 传一个不知道什么版本的上来,以后不用到处找了. 语法:$.ajaxFileUpload([options]) options参数说明: 1.url   上传处理程序地址. 2,fileElementId   需要上传的文件域的ID,即<input type="file">的ID. 3,secureuri 是否启用安全提交,默认为false. 4,dataType 服务器返回的数据类型.可以为xml,sc

  • jQuery Ajax使用FormData对象上传文件的方法

    jQuery Ajax使用FormData对象上传文件的方法

    FormData对象,是可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单". 在 Mozilla Developer 网站 使用FormData对象 有详尽的FormData对象使用说明. 但上传文件部分只有底层的XMLHttpRequest对象发送上传请求,那么怎么通过jQuery的Ajax上传呢? 本文将介绍通过jQuery使用FormData对象上传文件. 使用<form>表单初始化FormData对象方式上传文件 HTM

  • jQuery Ajax使用FormData上传文件和其他数据后端web.py获取

    XMLHttpRequest Level 2 添加了一个新的接口--FormData.与普通的 Ajax 相比,使用 FormData 的最大优点就是我们可以异步上传二进制文件. jQuery 2.0+的版本支持FormData 方法一:使用<form>表单初始化FormData对象方式上传文件 •前端(JQuery): <form enctype="multipart/form-data"> <input type="file" na

  • 一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子

    jQuery插件AjaxFileUpload可以实现ajax文件上传,该插件使用非常简单,首先了解一下正确使用AjaxFileUpload插件的方法,然后再了解一些常见的错误信息和解决方法. 使用说明 需要使用jQuery库文件 和AjaxFileUpload库文件 使用实例 一,包含文件部分 复制代码 代码如下: <script type="text/javascript" src="jquery.js"></script> <scr

  • JQuery插件ajaxfileupload.js异步上传文件实例

    在服务器端做文件上传的过程中,如果使用web服务器短端的上传控件去上传文件的话,会导致页面刷新一次,这样对用户的体验就不是很友好了.ajaxfileupload.js是一款jQuery的异步上传文件插件,使用简单且容易上手. 前置条件:ajaxfileupload.js文件,百度下载一个就行. JS引用: 复制代码 代码如下: <script src="/Content/JQueryJS/jquery-2.1.1.js"></script> <script

  • jQuery插件ajaxFileUpload实现异步上传文件效果

    ajaxFileUpload是一个异步上传文件的jQuery插件. 传一个不知道什么版本的上来,以后不用到处找了. 语法:$.ajaxFileUpload([options]) options参数说明: 1.url   上传处理程序地址. 2,fileElementId   需要上传的文件域的ID,即<input type="file">的ID. 3,secureuri 是否启用安全提交,默认为false. 4,dataType 服务器返回的数据类型.可以为xml,scri

  • jQuery Ajax 上传文件处理方式介绍(推荐)

    jQuery Ajax 上传文件处理方式介绍(推荐)

    AJAX 是一种与服务器交换数据的技术,可以在补充在整个页面的情况下更新网页的一部分. 下面的表格列出了所有的 jQuery AJAX 方法: jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,接下来通过本文给大家介绍jquery ajax 上传文件处理方式. FormData对象 XMLHttpRequest Level 2添加了一个新的接口FormData.利用FormData对象,我们可以通过J

  • Asp.net MVC中使用JQuery插件ajaxFileUpload上传文件

    Asp.net MVC中使用JQuery插件ajaxFileUpload上传文件

    0 ajaxFileUpload简介 ajaxFileUpload插件是一个非常简单的基于Jquery的异步上传文件的插件,使用过程中发现很多与这个同名的,基于原始版本基础之上修改过的插件,文件版本比较多,我把我自己使用的ajaxFileUpload文件上传到博客园上了,想要使用的朋友可以下载:http://xiazai.jb51.net/201611/yuanma/ajaxfileupload(jb51.net).rar. 整个插件源码不到200行,实现非常简单,大致原理就是通过js动态创建隐

  • jQuery.Form实现Ajax上传文件同时设置headers的方法

    废话不多说了,关于jquery form实现ajax上传文件的方法,大家参考一下实例代码吧: <span style="font-family: Arial, Helvetica, sans-serif;">function ajaxSubmitForm() {</span> var option = { url : cache.batchImport, type : 'POST', dataType : 'json', headers : {"tok

随机推荐