二十七、單張圖片上傳預覽
html部分
<div class="new-store-phone">
<span class="phone-title">營業執照 </span>
<div class="phone-upload">
<input type="file" name="file" id="file" class="inputfile" onchange="changepic(this)" type="file" accept="image/*" />
<img src="" id="show" style="width: 100px; height: 100px;">
<label for="file" class=‘btn btn-success‘ onchange="changepic(this)" type="file" accept="image/*">上傳照片</label>
</div>
</div>
js部分
（1）第一部分是將圖片路徑渲染及上傳
function changepic(obj) {
//console.log(obj.files[0]);//這裏可以獲取上傳文件的name
var newsrc = getObjectURL1(obj.files[0]);
document.getElementById(‘show‘).src = newsrc;
var imgType="storeLogo";
var data={
imgType:imgType ,
}
$.ajaxFileUpload({
url : ‘/tsm/upload/filesUpload‘,
secureuri : false, //一般設置為false
fileElementId : ‘file‘, //文件上傳空間的id屬性 <input type="file" id="file" name="file" />
type : ‘post‘,
dataType : ‘json‘, //返回值類型 一般設置為json
data:data,
success : function(data) { //服務器成功響應處理函數
var result=data.result;
if(result==0){
var logoName=data.data[0];
$("#imgUrl1").val(logoName);
}
},
});
}
//建立一個可存取到該file的url
function getObjectURL(file) {
var url = null;
// 下面函數執行的效果是一樣的，只是需要針對不同的瀏覽器執行不同的 js 函數而已
if (window.createObjectURL != undefined) { // basic
url = window.createObjectURL(file);
} else if (window.URL != undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file);
} else if (window.webkitURL != undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file);
}
return url;
}
二十七、單張圖片上傳預覽