ajax提交图片文件并显示

适用与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;
}
}