Js上传图片,兼容ie

var upImg_config = {
    e0:‘上传出错,请重试!‘,
    e2:‘今日上传超过限制次数‘,
    e3:‘照片格式不符合要求!‘,
    e4:‘上传出错,请重试!‘,
    e5:‘照片大小超过限制!‘,
    e6:‘照片不能小于0M!‘
}

//检查是什么浏览器
function getExplorer() {
    var explorer = window.navigator.userAgent ;
    if (explorer.indexOf("MSIE") >= 0) {//ie
        return "ie";
    }else if (explorer.indexOf("Firefox") >= 0) {//firefox
        return "Firefox";
    }else if(explorer.indexOf("Chrome") >= 0){//Chrome
        return "Chrome";
    }else if(explorer.indexOf("Opera") >= 0){//Opera
        return "Opera";
    }else if(explorer.indexOf("Safari") >= 0){//Safari
        return "Safari";
    }
}

//获取选择的文件的路径
function getObjectURL(target){
    var url = null;
    if (window.navigator.userAgent.indexOf("MSIE")>=1){
        target.select();
         url = document.selection.createRange().text;
    } else {
        var file = $(target)[0].files[0];
        if (window.createObjectURL != undefined) {
            url = window.createObjectURL(file)
        } else if (window.URL != undefined) {
            url = window.URL.createObjectURL(file)
        } else if (window.webkitURL != undefined) {
            url = window.webkitURL.createObjectURL(file)
        }
    }
    return url;
}

// 获取文件名称后缀 、不带后缀
function getFilePath(filePath){
    var path = [];
    var pos = filePath.lastIndexOf(‘.‘);
    path[‘fileExt‘] = filePath.substring(pos);   //获取后缀
    path[‘fileName‘] = filePath.substring(0,pos);//获取文件名,不带后缀
    return path;
}

//上传图片
$(".showPhotosCon dt").click(function(){
    $(".upTips").hide();
    $(".upLoad").removeClass("hide");
    $(".shade").removeClass("hide");
});

//选择图片 判断格式、大小等
$("#fileUpload").on(‘change‘,function(){
    var _file = $(this);
    var fileSize = 0;
    var filetypes =[".jpg",".gif",".png",".bmp"];
    var filemaxsize = 1024*1024*2;//2M
    var filepath = _file.val();
    $(".upTips").hide();
    if(filepath){
        //getObjectURL(this);
        var pathArr = getFilePath(filepath);
        console.log(pathArr);
        if(filetypes && filetypes.length>0){
            if($.inArray(pathArr[‘fileExt‘].toLowerCase(),filetypes) < 0){
                $(".upTips").html(upImg_config.e2).show();
                //清除input内容
                _file.after(_file.clone().val(""));
                _file.remove();
                // if(myExplorer == ‘ie‘){
                //     $(this).focus();
                //     this.select();
                //     document.execCommand("delete");
                // }else{
                //     $(this).val("");
                // }
                return false;
            }
        }
        var myExplorer = getExplorer();
        if(myExplorer == ‘ie‘){
            var img = new Image();
               img.src = filepath;
               fileSize = img.fileSize > 0?img.fileSize:500;
        }else{
            fileSize = $(this)[0].files[0].size || $(this)[0].files[0].fileSize;
        }
        if(fileSize>filemaxsize || fileSize <= 0){
            if(fileSize>filemaxsize){
                $(".upTips").html(upImg_config.e5).show();
            }else{
                $(".upTips").html(upImg_config.e6).show();
            }
            //清除input内容
            _file.after(_file.clone().val(""));
            _file.remove();
            return false;
        }
    }else{
        return false;
    }
    uploadSubmit();// 直接上传。。
});

//执行上传操作
function uploadSubmit(){
    //alert(11);
    var btn = $(‘.upPicShade‘);
    btn.html("上传中...");
    $.ajaxFileUpload({
        url:wm_config.uploadImg,
        secureuri:false,
        fileElementId:‘fileUpload‘,
        dataType:‘json‘,
        data:{},
        success:function(data,status){
            // 固定的前置错误码
            var test1 = "HTTP Status 404 - No result defined for action com.henda.webma.action.MapUploadJsonAction and result";
            var obj = new Object();
            if (data.length > test1.length) {
                // 去掉前后空格
                var test2 = data.substring(test1.length).replace(/^\s+|\s+$/g, "");
                // 将Json串转为对象
                obj = eval("(" + test2 + ")");
            }
            if (obj.status == "success") {
                //0失败  1 成功  2 限制    3  不规范
                uploadImgCallBack(obj.message);
            } else { // 如果错了
                if (typeof (obj.message) != undefined) {
                    uploadImgCallBack(4);
                    if (obj.message != ‘‘) {
                        //alert(obj.message);
                    } else {
                        //alert("faile");
                    }
                }
            }
        },
        error:function(data,status,e){
            //console.log(e);
            //alert(e);
            uploadImgCallBack(4);
        }
    });
}

//上传后回调函数
function uploadImgCallBack(code){
    switch(code){
        case 0:
            $(".upTips").html(upImg_config.e0).show();
            break;
        case 1:
            $(".upLoad").addClass("hide");
            return false;
            break;
        case 2:
            $(".upTips").html(upImg_config.e2).show();
            break;
        case 3:
            $(".upTips").html(upImg_config.e3).show();
            break;
        case 4:
            $(".upTips").html(upImg_config.e4).show();
            break;
        default:
            break;
    }
    var btn = $(‘.upPicShade‘);
    btn.html("选择照片");}
时间: 2024-08-05 07:26:46

Js上传图片,兼容ie的相关文章

关于js的兼容问题(小办法)!

今天整理了一下浏览器对JS的兼容问题,希望能给你们带来帮助,我没想到的地方请留言给我,我再加上: 常遇到的关于浏览器的宽高问题: //以下均可console.log()实验 var winW=document.body.clientWidth||document.docuemntElement.clientWidth;//网页可见区域宽 var winH=document.body.clientHeight||document.docuemntElement.clientHeight;//网页可

关于ajaxfileupload.js上传图片使用历程(struts2)

因为要使用上传图片功能,附加图片的描述信息, 而传统的<s: file/>由于一些限制在这个小模块中无法使用, 于是搜到了使用ajaxfileupload.js插件进行上传的方法,在使用过程中,jsp,js,struts2 因为自己不熟悉ajax的情况出了许多的小问题,在这里记录一下, 方便自己查看,也希望能帮到他人, 首先说一下思路,通过点击上传直接触发js 的function 调用后台把图片拷贝到指定服务器目录,返回保存的路径到前台,然后跟随图片描述信息一起用ajax异步传到后台.(PS:

js上传图片

注意:上传文件一般使用的是input标签,如果想要改样式,让input不显示,可以把input标签放入<leabel>标签中,然后让input标签 display:none: 案例1:上传单个图片,添加按钮不消失 html <div class="addPicture clearfix"> <!-- 图片显示区域 --> <div class="addPictureImg"></div> <!-- 添

原生 js 上传图片

js <!doctype html> <html> <head> <meta charset="utf-8"> <title>js上传图片</title> </head> <body> <input id="file" type="file"> <script type="text/javascript">

js 上传图片、压缩、旋转

html <!doctype html> <html> <head> <meta charset="utf-8"> <title>js上传图片</title> <script src="Script/plugins/0com/exif.js"></script> </head> <body> <input id="file"

js上传图片获取图片地址,兼容苹果

别人写的一个例子我记下了先,自己测试通过的 是别人分享的页面,原作者我是不知道了,感谢原作者写的代码 下面是代码:全部复制就是例子 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="//cdn.bootcss.com/jquery/1.8.3/jquery.js"><

js 上传图片本地预览缓存

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>文件上传</title> <script src="jQuery.js"></script> <style type="text/css"> #file{ display: block; width: 400px; heigh

js上传图片&amp;预览(filereader)

fileReader HTML5定义了FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型. FileReader的使用方式非常简单,可以按照如下步骤创建FileReader对象并调用其方法: 1.检测浏览器对FileReader的支持 if(window.FileReader) { var fr = new FileReader(); // add your code here } else { ale

js 完美兼容浏览器的复制功能

1,js结合swf的复制功能,完美兼容火狐,谷歌,360,ie8,使用示例:(ps:引入copy.swf比较重要,文件传送门 解压密码:http://www.bieanju.com/,为了防止360删除文件请解压后去除后缀的1) function copyText(){        var clip = new ZeroClipboard.Client();         clip.setHandCursor(true);                //var text= documen