本来以为图片预览功能非常的简单，就是在file标签change时获取路径展示给用户，但是浏览器处于安全考虑并不会让脚本获得绝对路径（这会在一定程度上暴露用户的文件 目录），只能获取文件名。所以要通过和后台的配合，在file标签发生change事件时，将图片以ajax的方式发送到后台，后台将图片保存在服务器，然后讲文件地址返回回来，再由前端展示给用户，完成预览功能！
文件的ajax并不是太容易，所以使用了jquery的插件，jquery.form.js。一些参数性问题可以参考form插件。
<form id="form-head"> <input type="button" id="btn-upload"/> <input type="file" id="upload-ffile"/> </form>
var $upload_btn = $(‘#btn-upload‘);
var $upload_file = $(‘#upload-file‘);
$upload_btn.click(function(){
$upload_file.click();
});
$upload_file.change(function(){
$(‘#form-head‘).ajaxSubmit({
url: "{:U(‘pages/upload‘)}",
iframe: true,
data: ‘json‘,
success: function(data){
var $data = $.parseJSON(data);
if ($data.status == 400){
alert(‘文件太大，请重新上传!‘);
} else if ($data.status == 200){
$b_header = true;
$(‘.show‘).css(‘background-image‘, $data.imagePath+")");
$upload_btn.css({‘color‘:‘white‘,‘backgroundColor‘:‘#fb874a‘});
$header_path = $data.imagePath;
}else if($data.status == 500){
alert("上传非法文件");
}
},
error: function(){
alert(‘头像上传失败！‘);
}
});
});
原文：http://www.cnblogs.com/kiscall/p/4900326.html