IE9 jQuery ajax文件上传兼容问题解决

位置:首页>文章>详情   分类: 教程分享 > Java教程   阅读(2113)   2023-03-28 11:29:14

1.准备

下载jQuery1.x版本(测试用v1.12.4)
下载jQuery的form插件(下载地址
本例子是通过Java后端进行测试的,后端为spring boot框架

2.后端代码

1测试的controller代码
package com.example;

import javax.servlet.http.HttpServletResponse;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.servlet.ModelAndView;

@Controller
public class TestController {

	@GetMapping(value = { "/", "/index.html" })
	public Object index() {
		return new ModelAndView("index");
	}

	@PostMapping(value = { "/fileupload.do" }, produces = { "text/html;charset=UTF-8" })
	@ResponseBody
	public Object fileUpload(String name, MultipartFile file) {
		try {
			if (file.getBytes().length > 0) {
				return "{\"message\":\"success\",\"name\":\"" + name + "\"}";
			} else {
				return "{\"message\":\"fail\"}";
			}
		} catch (Exception e) {
			throw new RuntimeException("文件上传异常");
		}
	}
	
	
	@PostMapping(value = { "/fileupload2.do" }/*, produces = { "text/html;charset=UTF-8" }*/)
	public void fileUpload2(String name, MultipartFile file,HttpServletResponse response) {
		try {
			if (file.getBytes().length > 0) {
				response.setContentType("");
				response.setHeader("Content-Type", "text/html;charset=UTF-8");
				response.getWriter().write("{\"message\":\"success\",\"name\":\"" + name + "\"}");
			} else {
				response.setHeader("Content-Type", "text/html;charset=UTF-8");
				response.getWriter().write("{\"message\":\"fail\"}");
			}
		} catch (Exception e) {
			throw new RuntimeException("文件上传异常");
		}
	}
	
	
	

}
注意:上面的第一种写法produces = { "text/html;charset=UTF-8" }必须这样写,其他写法则会出现各种问题

 

3.后端代码

1HTML页面代码
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>

<title>测试</title>
</head>
<body>
<form method="post" enctype="multipart/form-data" id="upload-form">
	<input type="text" name="name" />
	<input type="file" name="file"/>
</form>
<button type="button" id="btn-upload">上传测试</button>

<script type="text/javascript" src="/libs/jquery.min.js"></script>
<script type="text/javascript" src="/libs/jquery.form.js"></script>
<script type="text/javascript" src="/libs/index.js"></script>
</body>
</html>

2.index.js文件代码
/**
 * 
 */
$(function() {
	$('#btn-upload').click(function(){ 
		 var options = {  
			        url : "/fileupload.do",  
			        success : function(data) {  
			            var returnData = JSON.parse(data);  
			            alert(data);
			        },   
			        resetForm : true,  
			    }; 
		$("#upload-form").ajaxSubmit(options);
	})
})

4jQuery form控件API

Options

Note: All standard $.ajax options can be used.

beforeSerialize

Callback function invoked prior to form serialization. Provides an opportunity to manipulate the form before its values are retrieved. Returning false from the callback will prevent the form from being submitted. The callback is invoked with two arguments: the jQuery wrapped form object and the options object.

beforeSerialize: function($form, options) {
    // return false to cancel submit
}

beforeSubmit

Callback function invoked prior to form submission. Returning false from the callback will prevent the form from being submitted. The callback is invoked with three arguments: the form data in array format, the jQuery wrapped form object, and the options object.

beforeSubmit: function(arr, $form, options) {
    // form data array is an array of objects with name and value properties
    // [ { name: 'username', value: 'jresig' }, { name: 'password', value: 'secret' } ]
    // return false to cancel submit
}

filtering

Callback function invoked before processing fields. This provides a way to filter elements.

filtering: function(el, index) {
	if ( !$(el).hasClass('ignore') ) {
		return el;
	}
}

clearForm

Boolean flag indicating whether the form should be cleared if the submit is successful

data

An object containing extra data that should be submitted along with the form.

data: { key1: 'value1', key2: 'value2' }

dataType

Expected data type of the response. One of: null, 'xml', 'script', or 'json'. The dataType option provides a means for specifying how the server response should be handled. This maps directly to jQuery's dataType method. The following values are supported:

  • 'xml': server response is treated as XML and the 'success' callback method, if specified, will be passed the responseXML value
  • 'json': server response will be evaluted and passed to the 'success' callback, if specified
  • 'script': server response is evaluated in the global context

delegation

true to enable support for event delegation requires jQuery v1.7+

// prepare all existing and future forms for ajax submission
$('form').ajaxForm({
    delegation: true
});

error

Callback function to be invoked upon error.

forceSync

Only applicable when explicity using the iframe option or when uploading files on browses that don't support XHR2. Set to true to remove the short delay before posting form when uploading files. The delay is used to allow the browser to render DOM updates prior to performing a native form submit. This improves usability when displaying notifications to the user, such as "Please Wait..."

iframe

Boolean flag indicating whether the form should always target the server response to an iframe instead of leveraging XHR when possible.

iframeSrc

String value that should be used for the iframe's src attribute when an iframe is used.

iframeTarget

Identifies the iframe element to be used as the response target for file uploads. By default, the plugin will create a temporary iframe element to capture the response when uploading files. This options allows you to use an existing iframe if you wish. When using this option the plugin will make no attempt at handling the response from the server.

method

The HTTP method to use for the request (e.g. 'POST', 'GET', 'PUT').

replaceTarget

Optionally used along with the the target option. Set to true if the target should be replaced or false if only the target contents should be replaced.

resetForm

Boolean flag indicating whether the form should be reset if the submit is successful

semantic

Boolean flag indicating whether data must be submitted in strict semantic order (slower). Note that the normal form serialization is done in semantic order with the exception of input elements of type="image". You should only set the semantic option to true if your server has strict semantic requirements and your form contains an input element of type="image".

success

Callback function to be invoked after the form has been submitted. If a 'success' callback function is provided it is invoked after the response has been returned from the server. It is passed the following standard jQuery arguments:

  1. data, formatted according to the dataType parameter or the dataFilter callback function, if specified
  2. textStatus, string
  3. jqXHR, object
  4. $form jQuery object containing form element

target

Identifies the element(s) in the page to be updated with the server response. This value may be specified as a jQuery selection string, a jQuery object, or a DOM element.

type

The HTTP method to use for the request (e.g. 'POST', 'GET', 'PUT').
An alias for method option. Overridden by the method value if both are present.

uploadProgress

Callback function to be invoked with upload progress information (if supported by the browser). The callback is passed the following arguments:

  1. event; the browser event
  2. position (integer)
  3. total (integer)
  4. percentComplete (integer)

url

URL to which the form data will be submitted.


Utility Methods

formSerialize

Serializes the form into a query string. This method will return a string in the format: name1=value1&name2=value2

var queryString = $('#myFormId').formSerialize();

fieldSerialize

Serializes field elements into a query string. This is handy when you need to serialize only part of a form. This method will return a string in the format: name1=value1&name2=value2

var queryString = $('#myFormId .specialFields').fieldSerialize();

fieldValue

Returns the value(s) of the element(s) in the matched set in an array. This method always returns an array. If no valid value can be determined the array will be empty, otherwise it will contain one or more values.

resetForm

Resets the form to its original state by invoking the form element's native DOM method.

clearForm

Clears the form elements. This method emptys all of the text inputs, password inputs and textarea elements, clears the selection in any select elements, and unchecks all radio and checkbox inputs. It does not clear hidden field values.

clearFields

Clears selected field elements. This is handy when you need to clear only a part of the form.


File Uploads

The Form Plugin supports use of XMLHttpRequest Level 2 and FormData objects on browsers that support these features. As of today (March 2012) that includes Chrome, Safari, and Firefox. On these browsers (and future Opera and IE10) files uploads will occur seamlessly through the XHR object and progress updates are available as the upload proceeds. For older browsers, a fallback technology is used which involves iframes. More Info

标签: ie9文件上传
地址:https://www.leftso.com/article/275.html

相关阅读

IE9 jQuery ajax文件上传兼容问题解决。主要通过jQuery的jquery.form插件解决的IE9不支持formData的文件上传问题。
ie9 jquery ajax跨域问题解决, ajax ie9 跨域问题解决,jquery,ajax,ie9
HTML5+ajax上传图片/文件以及FormData使用简单讲解,HTML5,ajax上传文件,ajax
MIME 参考手册/HTTP文件上传格式过滤
Spring mvc文件下载IE/Edge中文乱码解决,在spring mvc项目开发中,我们可能经常遇到文件的上传和下载操作。这里将讲解在IE/Edge浏览器中文件下载中文乱码的解决方法。
做项目的时候经常遇到需要文件上传和限制文件上传的格式,文件格式虽然前端js能限制一次。但是作为稳定的后端服务,还是需要再次校验保证格式接口的稳定性。首先创建一个集合,用于存放那些文件格式支持上传...
el-upload图片上传安卓无法调用相机问题解决,vue 使用element-ui的文件上传组件el-upload安卓无法调用相机问题解决办法
Java编程之Spring Boot 文件上传 REST风格API ajax方式
HttpClient 4 分段上传文件,在本教程中,我们将演示如何使用HttpClient 4执行分段上传操作。
linux系统中ftp 上传和下载文件shell脚本编写