html上传图片后，在页面显示上传的图片

html上传图片后，在页面显示上传的图片

1、html

     <form class="container" enctype="multipart/form-data" method="post" id='formBox' name="form"> 
            <input type="file" id="chooseImage" name="file">
            <!-- 保存用户自定义的背景图片 -->
            <img id="cropedBigImg" value='custom' alt="lorem ipsum dolor sit" data-address='' title="自定义背景"/>
      </form>

2、js

 $('#chooseImage').on('change',function(){
    	var filePath = $(this).val(),         //获取到input的value，里面是文件的路径
    	    fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase();
    	// 检查是否是图片
    	if( !fileFormat.match(/.png|.jpg|.jpeg/) ) {
    		error_prompt_alert('上传错误,文件格式必须为：png/jpg/jpeg');
        	return;  
        }
        $('#cropedBigImg').attr('src',filePath);
        $('#loding').show();
});

本意是想当type=file的input的value改变的时候，得到图片路径，然后将路径赋给img的src，但是这样的路径是不支持在本地显示的。

3、修改可以在本地显示上传的图片的js

 $('#chooseImage').on('change',function(){
    	var filePath = $(this).val(),         //获取到input的value，里面是文件的路径
    		fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase(),
    		src = window.URL.createObjectURL(this.files[0]); //转成可以在本地预览的格式
    		
    	// 检查是否是图片
    	if( !fileFormat.match(/.png|.jpg|.jpeg/) ) {
    		error_prompt_alert('上传错误,文件格式必须为：png/jpg/jpeg');
        	return;  
        }
  
        $('#cropedBigImg').attr('src',src);
});

只需要添加下面这句代码，就可以在浏览器上显示本地上传的图片了

src = window.URL.createObjectURL(this.files[0]); //转成可以在本地预览的格式