oceania
oceania
  • 发布:2015-04-21 20:48
  • 更新:2018-08-27 11:37
  • 阅读:4923

怎么用plus.net.XMLHttpRequest()post提交带有图片的表单并接受服务器返回的数据

分类:HTML5+
2015-04-21 20:48 负责人:无 分享
已邀请:
DCloud_UNI_FXY

DCloud_UNI_FXY

mui.ajax支持文件上传和普通参数混合提交。参考以下代码

var fd = new FormData();  
				fd.append("username", "mui");//普通参数  
				fd.append('file', file.files[0]);//文件  
//目前需要使用标准xhr。plus的xhr暂不支持  
mui.ajaxSettings.xhr = function(protocol) {  
					return new window.XMLHttpRequest();  
				};  
				mui.ajax({  
					url: 'script.php',  
					data: fd,  
					processData: false,  
					contentType: false,  
					type: 'POST',  
					success: function(data) {  
						alert(data);  
					}  
				});
  • oceania (作者)

    请问file.files[0]的file是指什么?


    2015-04-22 23:26

huiyichengyi

huiyichengyi

做两个异步请求,一个上传文件一个提交表单内容,上传文件可以通过将图片转为base64编码实现

DCloud_UNI_FXY

DCloud_UNI_FXY

完整的测试代码

<div class="mui-content mui-fullscreen">  
			<input type="file" name="file" id="file" style="margin: 50px 0;"/>  
			<button id="upload" class="mui-btn mui-btn-block mui-btn-primary">上传</button>  
		</div>  
		<script type="text/javascript" src="js/mui.min.js"></script>  
  
		<script type="text/javascript" charset="utf-8">  
			mui.init();  
			var fileEl = document.getElementById("file");  
			document.getElementById("upload").addEventListener('tap', function() {  
				//标准xhr可以正常提交文件,plus的xhr提交的文件为空  
				mui.ajaxSettings.xhr = function(protocol) {  
					return new window.XMLHttpRequest();  
				};  
				var fd = new FormData();  
				fd.append("username", "mui");  
				fd.append('userfile', file.files[0]);  
				mui.ajax({  
					url: 'http://192.168.1.117/loccitane/admin/index.php/api/post',  
					data: fd,  
					processData: false,  
					contentType: false,  
					type: 'POST',  
					success: function(data) {  
						alert(data);  
					}  
				});  
			});  
		</script>
美好时光

美好时光

   您好。很不错的文件上传程序。  

   但好像程序不对。fd.append('userfile', file.files[0]);应该为fd.append('userfile', fileE1.files[0]);吧?否则file这个变量时从哪里来的呢?  
   请您确认一下,谢谢!  
   

该问题目前已经被锁定, 无法添加新回复