❶ ajaxSubmit图片上传
$(document).ready(function () { $(“#upload_file_input”).live('change', function () { $(“upload_share_form”).submit(function () { $(this).ajaxSubmit({ success: function () { $(“#ajax_upload_message”).html(“表单提交成功”).show(); }, url: site_url + “ajax/ajax_file_upload”, data: $('#upload_share_form').formSerialize(), type: 'POST', dataType: 'json', beforeSubmit: function () { $('#ajax_upload_message').html('正在努力上传图片，请稍候…'); interval = loop_delimiter(“正在努力上传图片，请稍候”, 'ajax_upload_message'); } }); return false; }); });});
❷ PHP 如何用ajax做文件上传
通过传统的form表单提交的方式上传文件：[html] view plain 在CODE上查看代码片派生到我的代码片<form id= "uploadForm" action= "http://localhost:8080/cfJAX_RS/rest/file/upload" method= "post" enctype ="multipart/form-data"><h1 >测试通过Rest接口上传文件 </h1><p >指定文件名： <input type ="text" name="filename" /></p><p >上传文件： <input type ="file" name="file" /></p><p >关键字1： <input type ="text" name="keyword" /></p><p >关键字2： <input type ="text" name="keyword" /></p><p >关键字3： <input type ="text" name="keyword" /></p><input type ="submit" value="上传"/></form>不过传统的form表单提交会导致页面刷新，但是在有些情况下，我们不希望页面被刷新，这种时候我们都是使用Ajax的方式进行请求的。Ajax的方式进行请求：[javascript] view plain 在CODE上查看代码片派生到我的代码片$.ajax({url : "http://localhost:8080/STS/rest/user",type : "POST",data : $( '#postForm').serialize(),success : function(data) {$( '#serverResponse').html(data);},error : function(data) {$( '#serverResponse').html(data.status + " : " + data.statusText + " : " + data.responseText);}});通常我们提交（使用submit button）时，会把form中的所有表格元素的name与value组成一个queryString，提交到后台。这用jQuery的方法来说，就是serialize。通过$('#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/FormDataConstructorFormData()想得到一个FormData对象：var formdata = new FormData();W3c草案提供了三种方案来获取或修改FormData。方案1：创建一个空的FormData对象，然后再用append方法逐个添加键值对：var formdata = new FormData();formdata.append("name", "呵呵");formdata.append("url", "http://www..com/");方案2：取得form元素对象，将它作为参数传入FormData对象中！var formobj = document.getElementById("form");var formdata = new FormData(formobj);方案3：利用form元素对象的getFormData方法生成它！var formobj = document.getElementById("form");var formdata = formobj.getFormData()MethodFormData.append本方法用于向已存在的键添加新的值，如该键不存在，新建之。语法formData.append(name, value);formData.append(name, value, filename);注: 通过 FormData.append()方法赋给字段的值若是数字会被自动转换为字符(字段的值可以是一个Blob对象,一个File对象,或者一个字符串,剩下其他类型的值都会被自动转换成字符串).参数解释name键 (key)， 对应表单域value表单域的值filename (optional)The filename reported to the server (a USVString), when a Blob or File is passed as the second parameter. The default filename for Blob objects is "blob".FormData.delete将一对键和值从 FormData 对象中删除。formData.delete(username);FormData.get返回给定键的第一个值formData.append('username', 'Justin');formData.append('username', 'Chris');formData.get(username); // "Justin"FormData.getAll返回给定键的所有值formData.append('username', 'Justin');formData.append('username', 'Chris');formData.getAll(username); // ["Justin", "Chris"]FormData.has检查是否包含给定键，返回 true 或 falseformData.has(username);FormData.set设置给定键的值formData.set(name, value);formData.set(name, value, filename);浏览器兼容情况来自 MDN：DesktopFeatureChromeFirfox(Gecko)Intenet ExplorerOperaSafariBasic support7+4.0(2.0)10+12+5+append with filename(Yes)22.0(22.0)???delete, get, getAll, has, setBehind FlagNot supportedNot supported(Yes)Not supportedMobileFeatureAndroidChrome AndroidFirfox Mobile (Gecko)Firfox OS (Gecko)IE MobileOpera MobileSafari MobileBasic support3.0?4.0(2.0)1.0.1?12+?append with filename??22.0(22.0)1.2???delete, get, getAll, has, set(Yes)(Yes)Not supportedNot supportedNot supported(Yes)Not supported2015年06月04日发布Ajax通过FormData上传文件1.使用<form>表单初始化FormData对象方式上传文件HTML代码<form id="uploadForm" enctype="multipart/form-data"><input id="file" type="file" name="file"/><button id="upload" type="button">upload</button></form>javascript代码$.ajax({url: '/upload',type: 'POST',cache: false,data: new FormData($('#uploadForm')[0]),processData: false,contentType: false}).done(function(res) {}).fail(function(res) {});这里要注意几点：processData设置为false。因为data值是FormData对象，不需要对数据做处理。<form>标签添加enctype="multipart/form-data"属性。cache设置为false，上传文件不需要缓存。contentType设置为false，不设置contentType值，因为是由<form>表单构造的FormData对象，且已经声明了属性enctype="multipart/form-data"，所以这里设置为false。上传后，服务器端代码需要使用从查询参数名为file获取文件输入流对象，因为<input>中声明的是name="file"。如果不是用<form>表单构造FormData对象又该怎么做呢？2.使用FormData对象添加字段方式上传文件HTML代码<div id="uploadForm"><input id="file" type="file"/><button id="upload" type="button">upload</button></div>这里没有<form>标签，也没有enctype="multipart/form-data"属性。javascript代码var formData = new FormData();formData.append('file', $('#file')[0].files[0]);$.ajax({url: '/upload',type: 'POST',cache: false,data: formData,processData: false,contentType: false}).done(function(res) {}).fail(function(res) {});这里有几处不一样：append()的第二个参数应是文件对象，即$('#file')[0].files[0]。contentType也要设置为‘false’。从代码$('#file')[0].files[0]中可以看到一个<input type="file">标签能够上传多个文件，只需要在<input type="file">里添加multiple或multiple="multiple"属性。3.服务器端读文件从Servlet 3.0 开始，可以通过 request.getPart() 或 request.getPars() 两个接口获取上传的文件。
❸ ajax怎么提交带文件上传表单
上传的文件是没有办法和表单内容一起异步的，可考虑使用jquery的ajaxfileupload,或是其他的插件，异步上传文件后，然后再对表单进行操作。
❹ PHP 用AJAX 做多文件上传
比较推荐使用swfupload上传代码，它是把swf和javascript结合起来，做成上传代码。功能应该是当前最丰富的。它可以实现纯粹html、javascrip难以逾越的功能：(1)可以同时上传多个文件；(2)类似AJAX的无刷新上传；(3)可以显示上传进度；(4)良好的浏览器兼容性；目前QQ空间和博客网站，比较先进的图片上传也是基于swf和js代码结合的做法。关于swfupload，你可以详细去网络上看，不重复了。http://ke..com/view/1332553.htm
❺ 如何用Ajax实现多文件上传
jquery 实现多个上传文件教程：首先创建解决方案,添加jquery的js和一些资源文件(如图片和进度条显示等):12345 jquery-1.3.2.min.js jquery.uploadify.v2.1.0.js jquery.uploadify.v2.1.0.min.js swfobject.js uploadify.css1、页面的基本代码如下这里用的是aspx页面(html也是也可的)页面中引入的js和js函数如下：1234567<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script> <script src="js/jquery.uploadify.v2.1.0.js" type="text/javascript"></script> <script src="js/jquery.uploadify.v2.1.0.min.js" type="text/javascript"></script> <script src="js/swfobject.js" type="text/javascript"></script> <link href="css/uploadify.css" rel="stylesheet" type="text/css" /> </script>js函数：12345678910111213141516171819202122232425262728293031<script type="text/javascript"> $(document).ready(function () { $("#uploadify").uploadify({ 'uploader': 'image/uploadify.swf', //uploadify.swf文件的相对路径，该swf文件是一个带有文字BROWSE的按钮，点击后淡出打开文件对话框 'script': 'Handler1.ashx',// script ： 后台处理程序的相对路径 'cancelImg': 'image/cancel.png', 'buttenText': '请选择文件',//浏览按钮的文本，默认值：BROWSE。 'sizeLimit':999999999,//文件大小显示 'floder': 'Uploader',//上传文件存放的目录 'queueID': 'fileQueue',//文件队列的ID，该ID与存放文件队列的div的ID一致 'queueSizeLimit': 120,//上传文件个数限制 'progressData': 'speed',//上传速度显示 'auto': false,//是否自动上传 'multi': true,//是否多文件上传 //'onSelect': function (e, queueId, fileObj) { // alert("唯一标识:" + queueId + "\r\n" + // "文件名：" + fileObj.name + "\r\n" + // "文件大小：" + fileObj.size + "\r\n" + // "创建时间：" + fileObj.creationDate + "\r\n" + // "最后修改时间：" + fileObj.modificationDate + "\r\n" + // "文件类型：" + fileObj.type); // } 'onQueueComplete': function (queueData) { alert("文件上传成功！"); return; } }); });页面中的控件代码：12345678910111213<body> <form id="form1" runat="server"> <div id="fileQueue"> </div> <div> <p> <input type="file" name="uploadify" id="uploadify"/> <input id="Button1" type="button" value="上传" onclick="javascript: $('#uploadify').uploadifyUpload()" /> <input id="Button2" type="button" value="取消" onclick="javascript:$('#uploadify').uploadifyClearQueue()" /> </p> </div> </form> </body>函数主要参数：12345678910111213141516171819$(document).ready(function() { $('#fileInput1').fileUpload({ 'uploader': 'uploader.swf',//不多讲了 'script': '/AjaxByJQuery/file.do',//处理Action 'cancelImg': 'cancel.png', 'folder': '',//服务端默认保存路径 'scriptData':{'methed':'uploadFile','arg1','value1'}, //向后台传递参数,methed,arg1为参数名,uploadFile,value1为对应的参数值,服务端通过request["arg1"] 'buttonText':'UpLoadFile',//按钮显示文字,不支持中文,解决方案见下 //'buttonImg':'图片路径',//通过设置背景图片解决中文问题,就是把背景图做成按钮的样子 'multi':'true',//多文件上传开关 'fileExt':'*.xls;*.csv',//文件过滤器 'fileDesc':'.xls',//文件过滤器 详解见文档 'onComplete' : function(event,queueID,file,serverData,data){ //serverData为服务器端返回的字符串值 alert(serverData); } }); });后台一般处理文件：1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950using System; using System.Collections.Generic; using System.Linq; using System.IO; using System.Net; using System.Web; using System.Web.Services; namespace fupload { /// <summary> /// Handler1 的摘要说明 /// </summary> public class Handler1 : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; HttpPostedFile file = context.Request.Files["Filedata"];//对客户端文件的访问 string uploadPath = HttpContext.Current.Server.MapPath(@context.Request["folder"])+"\\";//服务器端文件保存路径 if (file != null) { if (!Directory.Exists(uploadPath)) { Directory.CreateDirectory(uploadPath);//创建服务端文件夹 } file.SaveAs(uploadPath + file.FileName);//保存文件 context.Response.Write("上传成功"); } else { context.Response.Write("0"); } } public bool IsReusable { get { return false; } } } }以上方式基本可以实现多文件的上传，大文件大小是在控制在10M以下/。
❻ ajax怎样提交form表单与实现文件上传
Ajax 提交form方式可以来将form表单序列化源 然后将数据通过data提交至后台，例如：
❼ ajaxSubmit做文件上传为什么在IE中进度条无反应
ie浏览器不支持formdata对象，所以上传文件需要iframe来模拟，firefox，chrome支持formdata对象，所以不需要iframeIE调用fileUploadIframe方法上传文件，这个方法没有调用uploadProgress。
❽ Hi,请问我用jQuery的ajaxSubmit上传，也出现了问题，不知怎么解决
在ajaxSubmit提交表单的时候，如果表单内有文件上传的话，会判断参数是否配置的iframe为false参数，如果没有，会用创建隐藏iframe方式提交表单，如果设定了iframe为false，则判断浏览器是否支持HTML5的fileAPI，支持就直接使用XHR方式提交，否则就当作普通表单提交。所以因为是用隐藏iframe提交的表单，如果服务器返回的是“application/json”类型的数据，IE和Chrome默认是下载文件的，因为内容是返回给了iframe，而不是ajaxSubmit的success方法。在iframe加载了返回结果后，ajaxSubmit的success方法是去读取iframe的内容来转换成json对象使用。解决办法就是，在ajaxSubmit提交表单的配置里面，增加一个参数，服务器端判断是否是ajaxSubmit提交过来的表单，是的话就返回“text/html”类型的内容，不是就可以返回“application/json”的。简单的说就是ajaxSubmit上传文件的话，返回的内容只能是网页内容的，否则IE就有可能出现下载提示框。
