图片粘贴上传,预览——兼容ie（手动上传）和谷歌浏览器（粘贴或拖拽上传）(方法一)

最新推荐文章于 2024-08-06 12:18:21 发布

珠穆雪峰

最新推荐文章于 2024-08-06 12:18:21 发布

阅读量2.5k

点赞数

分类专栏： java随笔文章标签：图片上传及预览

本文链接：https://blog.csdn.net/qq_20086125/article/details/82998093

版权

该博客介绍了一种兼容IE手动上传和Chrome浏览器图片粘贴、拖拽上传的方法。通过优化CSS，使用不同方式处理IE的form表单提交和现代浏览器的XMLHttpRequest formData提交，实现图片预览功能。在后台，控制器和ServiceImpl中处理图片的保存操作。

摘要由CSDN通过智能技术生成

1.优化上传的css：

.img-class {
    width: 525px;
    height: 290px;
}

.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.页面jsp部分：ie上传采用的是form表单提交；其他支持粘贴上传的采用XMLHttpRequest的formData()提交;

<form id="applyFrom" name="applyFrom" class="form-inline" method="post" enctype="multipart/form-data"
      style="margin: 15px 0 0 10px; padding-right: inherit;">
    <input type="hidden" value="${berthChargeRecord.recordId}" id="recordId"/>
    <input type="hidden" value="${berthChargeRecord.alarmId}" id="alarmId" name="alarmId"/>
...
<div class="control-group">
    <div class="control-label">入车图片：</div>
    <div class="controls" style="position: relative;">
        <p id="log" style="width: 490px;word-break:break-all;"></p>
        <div id="inputImg" style="display: none;">
            <a href="javascript:void(0);" class="a-file">选择图片
                <input type="file" id="file" name="file"
                       onchange='getImgName(this);'/>
            </a>
        </div>
        <div id="pasteShapeIcon" contenteditable="true" class="img-paste-class" title="粘贴上传图片">
            <span id="pasteShapeIconTitle"></span>
            <img id="photoPath" src="${berthChargeRecord.realUrl}"
                 class="img-class">
        </div>
    </div>
</div>
</form>

3.js部分:

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

$(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();