jquery form插件(ajax)上传文件实现及原理

来源:互联网 时间:1970-01-01

jquery form插件(ajax)上传文件实现及原理,有需要的朋友可以参考下。


jquery form插件ajax上传文件的原理,

1、浏览器实现了XMLHttpRequest level2规范的,则使用xhr直接提交文件。通常来说chrome、firefox都实现了xhr level2规范

2、浏览器只实现了XMLHttpRequest level2规范的,则使用form+iframe方式,实现页面无刷新上传文件。通常来说,IE8及以下都属于此列。


jquery form上传文件的样例代码


<div> <h2>jquery form插件上传文件 - 示例程序</h2> <form id="uploadForm" method="post" > <input type="file" name="Filedata"></input> <input id="subbtn" type="submit" > </form> </div>


$('input[name=Filedata]').change(function () { initUploadForm();});function initUploadForm () { var url = "/flash/upload"; var options = { type: 'post',url: url, success:function(ret) { //var tempret = eval('('+ret+')'); alert(tempret.result); }, error:function (responseText, statusText) { alert("shang chuan cuo wu"); } }; // pass options to ajaxForm $('#uploadForm').ajaxForm(options);}





String ajaxmethod = request.getHeader("X-Requested-With"); if(StringUtils.isBlank(ajaxmethod)){//非ajax请求 response.setContentType("text/html;charset=UTF-8"); }else{ response.setContentType("application/json;charset=UTF-8"); }Map<String,String> map = new HashMap<String,String> (); map.put("result", "success"); String jsonstr = new Gson().toJson(map); try { response.getWriter().write(jsonstr); } catch (IOException e) { e.printStackTrace(); } 

客户端,如果仅仅设置服务器端,客户端又会出问题。在IE8下会出现undefined,究其原因是success函数接收的参数是json字符串,没有转化为json 对象,所以,会出现undefined。


if(typeof ret == "string"){ var tempret = eval('('+ret+')'); alert(tempret.result); }else{ alert(ret.result); }

jquery form上传文件原理原文:

htmlExampleTarget (output will be added below):

This page demonstrates the Form Plugin's file upload capabilities. There is no special coding required to handle file uploads. File input elements are automatically detected and processed for you.

Browsers that support theXMLHttpRequest Level 2will be able to upload files seamlessly and even get progress updates as the upload proceeds. For older browsers, a fallback technology is used which involves iframes since it is not possible to upload files using the level 1 implmenentation of the XMLHttpRequest object. This is a common fallback technique, but it has inherent limitations. The iframe element is used as the target of the form's submit operation which means that the server response is written to the iframe. This is fine if the response type is HTML or XML, but doesn't work as well if the response type is script or JSON, both of which often contain characters that need to be repesented using entity references when found in HTML markup.

To account for the challenges of script and JSON responses when using the iframe mode, the Form Plugin allows these responses to be embedded in atextareaelement and it is recommended that you do so for these response types when used in conjuction with file uploads and older browsers.

It is important to note that even when the dataType option is set to 'script', and the server is actually responding with some javascript to a multipart form submission, the response's Content-Type header should be forced totext/html, otherwise Internet Explorer will prompt the user to download a "file".

Also note that if there is no file input in the form then the request uses normal XHR to submit the form (not an iframe). This puts the burden on your server code to know when to use a textarea and when not to. If you like, you can use theiframeoption of the plugin to force it to always use aniframe modeand then your server can always embed the response in a textarea. But the recommended solution is to test for the 'X-Requested-With' request header. If the value of that header is 'XMLHttpRequest' then you know that the form was posted via ajax. The following PHP snippet shows how you can be sure to return content successfully:


jquery form Plugin doc