图片粘贴上传(方法二)

针对之前的图片粘贴上传方法进行封装，并给出使用案例，如下：

目录

一.封装的文件

1.css文件：paste-img-util.css

2.js文件：paste-img-util.js

3.表单上传js:jquery.form.js 

二.页面使用方法

1.顶部css引用

2.中间表单设置

3.底部js应用

---

 

一.封装的文件

 

1.css文件：paste-img-util.css

/*图片粘贴功能的样式*/
.img-class {
    width: 525px;
    height: 290px;
    cursor: pointer;
}

.img-paste-class {
    width: 530px;
    height: 330px;
}

.a-file {
    position: relative;
    display: inline-block;
    background: #D0EEFF;
    border: 1px solid #99D3F5;
    border-radius: 4px;
    padding: 4px 12px;
    overflow: hidden;
    color: #1E88C7;
    text-decoration: none;
    text-indent: 0;
    line-height: 20px;
}

.a-file input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;
}

.a-file:hover {
    background: #AADFFD;
    border-color: #78C3F3;
    color: #004974;
    text-decoration: none;
}

2.js文件：paste-img-util.js

// 初始化配置
$(function () {
    //照片不存在显示粘贴框
    if ($("#photoPath").attr("src") == "") {
        if (isIE()) {
            $("#inputImg").show();
            $("#pasteShapeIcon").hide();
        } else {
            $("#inputImg").hide();
            document.getElementById("pasteShapeIcon").style.border = "dashed";
            $("#pasteShapeIconTitle").text("在此框中粘贴图片");
        }
        $("#photoPath").hide();
    } else {
        if (isIE()) {
            $("#inputImg").show();
        }
        document.getElementById("pasteShapeIcon").style.border = "0";
        $("#pasteShapeIconTitle").text("");
        document.getElementById("photoPath").style.border = "solid";
        $("#photoPath").show();
    }

    // 非ie浏览器则使用粘贴方式
    if (!isIE()) {
        // 粘贴事件
        document.getElementById('pasteShapeIcon').addEventListener("paste", function (event) {
            paste_img(event);
        }, false);

        // 拖拽事件
        document.getElementById('pasteShapeIcon').addEventListener("drop", function (e) {
            e.stopPropagation();
            e.preventDefault();
            handleFiles(e.dataTransfer.files);
        }, false);
    }

});


// 判断是否是ie浏览器
function isIE() {
    if (!!window.ActiveXObject || "ActiveXObject" in window)
        return true;
    else
        return false;
}

// 非ie浏览器图片预览方法
function preViewImg(file){
    var reader = new FileReader()
    reader.onload = function (event) {
        document.getElementById("pasteShapeIcon").style.border = "0";
        $("#pasteShapeIconTitle").text("");
        document.getElementById("photoPath").style.border = "solid";
        $("#photoPath").show();
        $("#photoPath").attr("src", event.target.result);

    }
    reader.readAsDataURL(file);
}

// 粘贴上传图片方法
function paste_img(event) {
    if (event.clipboardData || event.originalEvent) {
        //not for ie11  某些chrome版本使用的是event.originalEvent
        var clipboardData = (event.clipboardData || window.clipboardData || event.originalEvent.clipboardData);
        if (clipboardData.items) {
            var items = clipboardData.items,
                file = null;
            //阻止默认行为即不让剪贴板内容在div中显示出来
            event.preventDefault();
            if (items && items.length) {
                // 搜索剪切板items
                for (var i = 0; i < items.length; i++) {
                    if (items[i].type.indexOf('image') !== -1) {
                        //getAsFile() 此方法只是living standard firefox ie11 并不支持
                        file = items[i].getAsFile();
                        break;
                    }
                }
            } else {
                log.innerHTML = '<span style="color:red;">当前浏览器不支持桌面图片复制和粘贴上传</span>';
                return;
            }
            if (!file) {
                log.innerHTML = '<span style="color:red;">粘贴内容非图片</span>';
                return;
            } else {
                // 预览图片
                preViewImg(file);
                // 提示是否上传
                showTip(file);
            }
        } else {
            //其他不兼容的浏览器
            log.innerHTML = '<span style="color:red;">当前浏览器不支持上传</span>';
            return;
        }
    } else {
        //ie 浏览器要手动上传
        log.innerHTML = '<span style="color:red;">请选择图片提交上传</span>';
        return;
    }
}

// 拖拽上传图片方法
function handleFiles(files) {
    for (var i = 0; i < files.length; i++) {
        var file = files[i];

        //如果拖住进来的是图片文件则显示
        if (file.type.match(/image*/)) {
            $("#pasteShapeIcon").focus();
            // 预览图片
            preViewImg(file);
            showTip(file);
        } else {
            st.layer.alert('请上传图片格式文件!', {icon : 3, time : default_close_time});
            continue;
        }
    }
}

// 保存前确认提示
function showTip(file) {
    //提示是否替换图片
    st.layer.confirm('确定上传保存该图片?', {
        time: 0,
        closeBtn: 2,
        btn: ['确定', '取消'],
        yes: function (index, layero) {
            //保存图片
            sendFile(file);
            st.layer.close(index);
        },
        cancel: function (index) {
            st.layer.alert('您已取消上传,图片不会被保存!', {icon : 4, time : default_close_time});
            return;
        }
    });

}

// 保存图片
function sendFile(file) {

    // 上传必传参数(记录主键ID)
    var alarmId = $("#alarmId").val();
    var xhr = new XMLHttpRequest();

    // 上传进度
    if (xhr.upload) {
        xhr.upload.addEventListener('progress', function (event) {
            log.innerHTML = '<span style="color:blue;">正在上传，进度：</span><span style="color:red;">' + Math.round(100 * event.loaded / event.total) / 100 + '%</span>';
        }, false);
    }
    // 上传结束
    xhr.onload = function () {
        var res = xhr.responseText;
        var obj;
        if (res) { //返回值可能为空，就会报错
            obj = eval('(' + res + ')');
        }
        if (obj.successful) {
            log.innerHTML = '<span style="color:blue;">上传成功，地址是：' + obj.successInfo + '</span>';
        } else {
            log.innerHTML = '<span style="color:red;">' + obj.errorInfo + '</span>';
        }

    };
    xhr.onerror = function () {
        log.innerHTML = '<span style="color:red;">网络异常，上传失败</span>';
    };
    xhr.open('POST', path + '/berthChargeRecord/uploadShapeIcon', true);
    xhr.setRequestHeader('FILENAME', encodeURIComponent(file.name));

    var fd = new FormData();
    fd.append("file", file);
    fd.append("alarmId", alarmId);
    xhr.send(fd);


}

// ie浏览器上传附件按钮优化 ，加入图片判断
function getImgName(file) {
    var filePath = $(file).val();
    var parent = $(file).parent();
    var arr = filePath.split('\\');
    var fileName = arr[arr.length - 1];
    if (filePath == "") {
        log.innerHTML = '<span style="color:red;">请选择图片</span>';
        return false;
    } else {
        if (!/\.(gif|jpg|jpeg|png|bmp|pic|GIF|JPG|JPEG|PNG|BMP|PIC)$/.test(fileName)) {
            parent.text("选择图片").prepend($(file));
            log.innerHTML = '<span style="color:red;">仅限于png、gif、jpeg、jpg、bmp、pic图片格式文件上传</span>';
            return false;
        } else {
            log.innerHTML = '';
            if (fileName.length > 16) {
                var name1 = fileName.substring(0, 8) + "...";
                var name2 = "..." + fileName.substring(fileName.length - 8, fileName.length);
                fileName = name1 + name2;
            }
            parent.text(fileName).prepend($(file));

            //图片预览
            var $file = $(file);
            var fileObj = $file[0];
            var windowURL = window.URL || window.webkitURL;
            var dataURL;
            var $img = $("#photoPath");
            var $paste = $("#pasteShapeIcon");
            // 区别是否支持
            if (fileObj && fileObj.files && fileObj.files[0]) {
                dataURL = windowURL.createObjectURL(fileObj.files[0]);
            } else {
                dataURL = $file.val();
                var imgObj = document.getElementById("photoPath");
                imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;
            }
            $paste.removeAttr('title');
            $paste.show();
            $img.show();
            $img.attr('border', 'solid');
            $img.attr('src', dataURL);

            //提示是否替换图片
            st.layer.confirm('确定上传保存该图片?', {
                time: 0,
                closeBtn: 2,
                btn: ['确定', '取消'],
                yes: function (index, layero) {
                    st.layer.close(index);

                    //给form添加action地址并执行提交
                    var options = {
                        url: path + "/berthChargeRecord/uploadShapeIcon",
                        type: 'post',
                        //target:'formUpFile',　　//服务器返回的响应数据显示在元素(Id)号确定
                        //clearForm:true,　　　　　　 //提交成功后是否清空表单中的字段值
                        //restForm:true,　　　　　　  //提交成功后是否重置表单中的字段值，即恢复到页面加载时的状态
                        //timeout:6000, 　　　　　 　 //设置请求时间，超过该时间后，自动退出请求，单位(毫秒)。
                        dataType: 'json',
                        success: function (obj) {
                            if (obj) {
                                if (obj.successful) {
                                    $("#photoPath").attr("src", obj.successInfo);
                                    log.innerHTML = '<span style="color:blue;">上传成功，地址是：' + obj.successInfo + '</span>';
                                } else {
                                    log.innerHTML = '<span style="color:red;">' + obj.errorInfo + '</span>';
                                }
                            } else {
                                log.innerHTML = '<span style="color:red;">图片已保存</span>';
                            }
                        },
                        error: function (xhr, status, error) {
                            var data = xhr.responseText;
                            if (data != null && data != '') {
                                data = park.util.parseJSON(data);
                                if (null != data && null != data.errorInfo) {
                                    log.innerHTML = '<span style="color:red;">' + data.errorInfo + '</span>';
                                } else {
                                    log.innerHTML = '<span style="color:red;">请求失败,请重试</span>';
                                }
                            } else {
                                log.innerHTML = '<span style="color:red;">请求失败,请重试</span>';
                            }
                        },
                        complete: function (xhr, status) {
                            st.layer.closeAll('loading');
                        }
                    };
                    $("#applyFrom").ajaxSubmit(options);

                },
                cancel: function (index) {
                    st.layer.alert('您已取消上传,图片不会被保存!', {icon : 4, time : default_close_time});
                    return;
                }
            });
        }

    }


}

// 插件显示图片
function getImg(cellvalue, alarmId) {
    //清理原图片缓存
    $('[data-show=add]').remove();
    if(cellvalue == "" || cellvalue == null || cellvalue == "0"){
        // 加载遮罩
        st.layer.load(3);
        $.ajax({
            url : path + '/alarm/getAlarmImgs',
            type : 'POST',
            timeout : 300000,// 超时时间设置为300s
            dataType : 'json',
            data : {
                'alarmId' : alarmId
            },
            complete : function() {
                st.layer.closeAll('loading');
            },
            success : function(data, status) {
                if (data.successful) {
                    var imgObjectList = data.resultValue.split("#split#");
                    if (null != imgObjectList && imgObjectList.length > 0) {
                        for (var i = 0, j = 1; i < imgObjectList.length; i++, j++) {
                            if (null != imgObjectList[i] && "" != imgObjectList[i] && imgObjectList[i] != "null") {
                                $("#alarmImg").append('<img data-show="add"  data-caption="图' + j + '(共' + imgObjectList.length + '张)" data-src="' + imgObjectList[i] &#