实现图片预览功能

　　本来以为图片预览功能非常的简单，就是在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('头像上传失败！');
		}
	});

});