无刷新上传文件的几个关键技术点

为了兼容各种浏览器，上传文件就必须使用传统的form方式，配合js的submit，将form提交到一个隐藏的iframe中，在iframe的onload事件中获取返回值，这个过程有几个关键技术点：

1，iframe必须定义name属性值

<iframe id="fileuploadif" name="fileuploadif" style="display: none;"></iframe>

必须定义name标签，不能只定义id标签，否则在form中写的target="fileuploadif"无效（其实只是在IE中无效）。

2，文件的选择必须通过<input type="file">

有时候我们为了网页漂亮，就通过点击图片的方式，调用js脚本模拟点击input，弹出文件选择框，但是这种方式在IE下submit表单时，js会报一个“拒绝访问”的错误，解决方法就是点击input弹出文件选择框，没有别的办法。

3，如果让input覆盖到图片上，让input完全透明，怎么样呢？

如图：

先看看不覆盖的情况，我们点击input的右边（按钮），可以弹出文件选择框，而点击左边的文本框时，却无法弹出文件选择框，必须双击才行，如果将这个input覆盖到图片上，显然不是很完美，使用者也很奇怪，为什么我点击左边部分区域时无法弹出文件选择框呢？

如何让input右边的按钮充满整个区域，而看不到左边的文本框呢，秘诀在于将input的font-size属性设置成超大，比如100px，效果如下图：

4，让鼠标呈现手型

当input以透明方式覆盖到图片上时，鼠标移上去，我们希望是手型，这个在倒是IE下没有问题，但是在Chrome下有问题，即使你设置了input的cursor:pointer的css属性，还是不行，这里就要设置一个特殊的css样式了：

::-webkit-file-upload-button { cursor:pointer; }

完整代码如下：

html：

<form id="fileupload" action="/upload" method="post" enctype="multipart/form-data" target="fileuploadif"><div class="upload-picdiv"><img id="upload-pic" src="/images/addimage.png" style="max-width: 100%; max-height: 100%;"/><input name="file" class="upload-input-file" type="file" id="file" onchange="UploadFile(this)"/></div></form><iframe id="fileuploadif" name="fileuploadif" style="display: none;"></iframe>

css：

::-webkit-file-upload-button { cursor:pointer; }.upload-picdiv{width: 84px; height: 84px;text-align: center; margin-left: 20px; border: 1px solid #cccccc;overflow: hidden;}.upload-input-file{position: relative;top: -88px; left: -5px;width: 90px; height: 90px; border: 0px;font-size: 100px;cursor: pointer;filter:alpha(opacity=0); opacity:0;}

js代码：

function UploadFile(input) {    if ($(input).val()) {        $("#fileupload").submit();    }}$("#fileuploadif").on("load", function () {    var result = $(this).contents().find("body").html();    if (result.match(/^\d+-.+[.](jpg|gif|png|jpeg)$/i)) {        $("#upload-pic").attr("src", "/upload/" + result);    }    $("#file").val(null);});