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

为了兼容各种浏览器，上传文件就必须使用传统的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" οnchange="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);
});