适用与ie9及以上版本,else后的内容是为了兼容ie浏览器
需要下载ajaxFileUpload文件
<div id="img-box">
</div>
<div class="img-form">
<label><span>上传头像</span><input type="file" onchange="preview(this,'img-box')" id="img-file"></label>
<button class="img-submit">确定</button>
</div>
function preview(file,id){
var prevDiv = document.getElementById(id);
//file.files[0] 低版本ie会报错,用try catch
try {
if(file.files[0].type.indexOf("image/")==-1){
alert("请选择图片");
return false;
}
}catch (e){
console.log(e);
}
if (file.files && file.files[0]){
var reader = new FileReader();
reader.onload = function(evt){
prevDiv.innerHTML = '<img src="' + evt.target.result + '" class="img-picture">';
};
reader.readAsDataURL(file.files[0]);
} else{ //兼容ie
prevDiv.innerHTML = '<div class="img" style="width: 73px;height: 73px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';
}
}
$(".img-submit").click(function(){
$.ajaxFileUpload({ //下载引入插件
fileElementId: ["img-file"],
url: "",
type: "post",
dataType: "text", //json时可能会接受不到数据
success: function(msg) {
},
error: function(e) {
console.log(e);
}
})
下面是文件类性的判断的函数,调用方法与上面相似 onchage="getFileName(this)"
function getFileName(obj) {
var fileName=obj.files[0].name;
//console.log(fileName);
//取出上传文件的扩展名
var lastDotIndex=fileName.lastIndexOf(".");
var nameLen=fileName.length;
var suffix=fileName.substring(lastDotIndex+1,nameLen).toLowerCase();
//console.log(suffix);
if(suffix!="xls" && suffix!="xlsx"){
alert("请选择excel文件");
return false;
}
}