项目开发中关于type:file使用小技巧！

在日常开发当中，免不了上传文件功能，但是自带的控件形象（程序猿：我感觉很好看啊！），实在拿不太出手，但是我们又必须使用那个选择浏览文件的窗口，那怎么办呢？下面我告诉大家一个实用的小技巧。首先你得了解jquery.click()方法，它是可以模拟点击事件，我们知道它可以模拟点击事件之后那就好办了！我们定义一个 :type[file] 控件，为其添加上 class（注意:不一定是class，可以查看jquery元素选择器方法。）

<!-- 以下是我们定义的file控件 -->
<input type="file" />
<button>戳我！</button>
<!-- 当我们点击button的时候，那么我们要做的就是模拟用户点击了file控件，那怎么模拟呢？前面开始提到了jquery.click()方法，所以我们来试试！-->
$("button").click(function(){
$("input[type='file']").click();
});

搞定上面，那么我们已经成功一半了，现在我们就是要怎么在浏览文件之后点击确定，就直接上传呢？这个问题很好解决，相信熟悉jquery或者javascript的程序员都知道有一个事件叫做 change 。（就是值变更事件，当标签中内容改变离开焦点后触发该事件。）

<!--  定义一个file:change事件（绑定元素请自行根据项目更改） -->
$("input[type='file']").change(function(){
alert('上传成功!');
});

上面两个步骤都弄完了，那么就搞定了，我们将file控件使用css隐藏掉，就不用看到那个比较系统的”请选择文件“啦。

var target = 'body';
$(target).empty();
$(target).append('<input type=\'file\' style=\'display:none;\'/>')
$(target).append('<button>戳我！</button>');
$('button').click(function () {
$('input[type=\'file\']').click();
});
$('input[type=\'file\']').change(function () {
alert('上传成功!');
});

最后附上可以执行jquery代码，请任意打开一个已存在jquery.js 的网页，将下面段代码copy到控制台中，便可以直接运行看到效果啦。