通过FormData实现上传

<!DOCTYPE html>
<html>
<head>
	<title>文件上传</title>
</head>
<body>
<form id="form1" name="form1" enctype="multipart/form-data" >
	<input type="file" name="文件上传"/>
	<input id="formData-js" type="button" name="formData-js" value="formData-js"/>
	<input id="formData-send" type="button" name="formData-send" value="formData-send"/>
	<input id="formData-ajax" type="button" name="formData-ajax"  value="formData-ajax"/>
	
</form>
<script
  src="http://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
<script type="text/javascript" >
    var uploadUrl = ''
    //方法一 纯js 实现方式
	document.querySelector('#formData-js').onclick=function(){
		var formData = new FormData();

		/*formData.append("username", "Groucho");
		formData.append("accountnum", 123456); // 数字 123456 会被立即转换成字符串 "123456"*/

		// HTML 文件类型input，由用户选择
		formData.append("userfile", document.querySelector('[type="file"]').files[0]);

		// JavaScript file-like 对象
		/*var content = '<a id="a"><b id="b">hey!</b></a>'; // 新文件的正文...
		var blob = new Blob([content], { type: "text/xml"});

		formData.append("webmasterfile", blob);*/

		var request = new XMLHttpRequest();

		request.onreadystatechange=function(){
		  console.log(arguments)
		  debugger;
		}
		request.open("POST", uploadUrl);
		request.send(formData);
	}
	//方法二 ajax上传
	$('#formData-ajax').on('click',function(){
		var formData = new FormData(document.querySelector('#form1'));
		$.ajax({
			url:uploadUrl,
			data:formData,
			type: "POST",
			 processData: false,  // 不处理数据
  			contentType: false,  // 不设置内容类型
			succuss:function(){
				console.log(arguments)
			  	debugger;
			},
			fail:function(){
				console.log(arguments)
			  	debugger;	
			},
			complete:function(){
				console.log(arguments)
			  	debugger;	
			}
		})
		/*$.post(uploadUrl,formData,function(){
			console.log(arguments)
		  	debugger;
		})*/
	})

	//方法三 通过HTML表单创建FormData对象
	document.querySelector('#formData-send').onclick=function(){
		var formData = new FormData(document.querySelector('#form1'));
		
		var request = new XMLHttpRequest();

		request.onreadystatechange=function(){
		  console.log(arguments)
		  debugger;
		}
		request.open("POST", uploadUrl);
		request.send(formData);
	}

	///--------------------
	///这种有问题
	///------------------------
	/*document.querySelector('#formData-send').onclick=function(){

		
		document.querySelector('#form1').submit(uploadUrl);		
	}*/
</script>
</body>
</html>
通过FormData实现上传

猜你喜欢
