webview中input file伪造无刷新上传（兼容Android和IOS）

由于项目需要在android手机端实现上传图片功能，但不是原生android系统，里面的功能都是通过webview加载的页面实现的。

搜了一下android WebView控件里实现input file 上传的资料，但是上传操作是和form一起提交的，如下代码：

<div data-role="page" id="pageone">
	<form action="attach.upload" method="post" enctype="multipart/form-data" id="uploadForm" data-ajax="false"> 
		<input type="file" name="img" id="uploadFile"  />
		<input type="submit" value="开始上传" id="upload" />
	</form>
</div>

而我需要的是上传图片后，要获取到上传后返回的数据（返回的文件id等信息），还会进行其他的操作，例如再上传一张图片或者删除照片、继续填写表单等。

说到这里就感觉跟ajax异步提交很像，就搜了一些异步上传文件的资料，最后发现都不好用。

没办法，后来想了想，我仅仅想把上传照片操作和原来的form分开而已，然后就想到了用iframe，把上传照片的form放在iframe里面，iframe嵌入到外层form表单中不就好了嘛！

想到这里就感觉这种方法很可行，很激动，就去试试。

果然，确实可以上传图片，但是上传图片后的返回结果会显示到iframe里面，而且原来的上传图片form也没有了，这样就不能再次上传图片了，但跟我最终的目标很接近了，于是继续优化，点击上传按钮时触发一个事件，这个事件先给iframe绑定一个onload事件，当图片上传返回结果后会触发onload事件，在事件里处理返回结果并输出到外层form，然后再把iframe的src属性修改为上传图片的页面，这样iframe里又可以上传了。但这种做法会先把结果显示到iframe里面，然后再显示上传图片的form。

再次优化，iframe里的页面只放上传照片按钮和form，将file控件放在外层form，当选择好后，再把file控件复制一份到iframe里，在上传照片就好了，再把iframe大写设置为0就可以不显示了，  这样就实现了伪造无刷新上传。

写的比较乱，将就着看吧，主要是记录一下思路。

贴上部分代码：

iframe加载的上传图片代码index2.html

<div data-role="page" id="pageone">
<span style="white-space:pre">	</span><form action="attach.upload" method="post" enctype="multipart/form-data" id="uploadForm" data-ajax="false"> 
	<span style="white-space:pre">	</span><input type="submit" value="开始上传" id="upload" οnclick="parent.iframeLoad();"/>
	</form>
</div>

外层form里的file代码：

<input type="file" name="img" id="uploadFile"  />
<input type="button" value="开始上传" id="upload" οnclick="submitUploadIframe();"/>
			
<iframe width="0" height="0" src="index2.html" frameborder="no" id="fileIframe"></iframe>

js代码部分

//android upload pic begin
var fileValue = "";
$("#uploadFile").change(function(){
  fileValue = this.value;
});

function submitUploadIframe(){
  if(fileValue == "") return false;
  var uploadFile = $("#uploadFile"), $clone = uploadFile.clone(true);
  uploadFile.after($clone);
  uploadFile.appendTo(window.frames["fileIframe"].document.forms["uploadForm"]);
  fileValue = "";
  $(window.frames["fileIframe"].document).find("#upload").click();
  
}
function iframeLoad(){
	var iframe = $("#fileIframe")[0];
	if (iframe.attachEvent){ 
		iframe.attachEvent("onload", function(){ }); 
	} else { 
		iframe.onload = function(){ 
		var resultStr = $(this).contents().text();//获取iframe上传照片后的返回结果
<span style="white-space:pre">		</span>//......处理结果并输出到外层form里
		this.onload = function(){};
		this.src = "index2.html";
	};
} 


}
//android upload pic end