上传图片并展示效果图

html

<div class="exhibition">

    <input id="file" type="file" name="myfile" accept="image/*" onchange="imgChange(this);"/><img src="img/loding_img.jpg" id="imghead"/>

</div>

<div class="Upload">上传</div>

js代码

//file改变事件

function imgChange(obj) {
//获取点击的文本框
var file =document.getElementById("file");
var ff = $("#file").val();
var imgUrl;
//获取图片url兼容
if (window.navigator.userAgent.indexOf("Chrome") >= 1 || window.navigator.userAgent.indexOf("Safari") >= 1) { 
imgUrl =window.webkitURL.createObjectURL(file.files[0]);
} 
else { 
imgUrl= window.URL.createObjectURL(file.files[0]); 
}
var img =document.getElementById('imghead');
if(!/.(gif|jpg|jpeg|png|gif|jpg|png)$/.test(ff)){
        $('#m-toast-inner-text').text("只能上传gif,jpg,jpeg,png格式的图片");     
    img.setAttribute('src',"img/loding_img.jpg"); // 初始化图片
        return;
    }
img.setAttribute('src',imgUrl); // 修改img标签src属性值

};

//上传（我的项目是用FormData来上传的）

$(".Upload").click(function(){

var file = document.querySelector('[type=file]');

var formData = new FormData();

formData.append('voucher',$('#file')[0].files[0]);

                $.ajax({
type:"post",
url:_url,
data:formData,
processData: false,
    contentType: false,
dataType:"json",
crossDomain:true,
beforeSend:function(XMLHttpRequest){ }, 

success:function(data){

                            console.log(data)

                        },

                        error:function(){}

        }）

}）