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" onclick="parent.iframeLoad();"/></form></div>

外层form里的file代码：

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

js代码部分

//android upload pic beginvar 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