图片上传预览及上传后台

最新推荐文章于 2025-01-28 16:03:20 发布

lxacdf

最新推荐文章于 2025-01-28 16:03:20 发布

阅读量6.3k

点赞数 1

分类专栏：前端文章标签：图片上传预览

本文链接：https://blog.youkuaiyun.com/lxacdf/article/details/77159113

版权

前端专栏收录该内容

8 篇文章

订阅专栏

用纯js实现图片在线预览功能，并增加提交后台代码，实现多个图片多次请求上传，具体使用再进行修改即可，需要引入jquery、layer、ajaxfileupload相关js文件，在非IE浏览器中可以实现点击图片展示大图的功能，IE浏览器下只可以预览，没有绑定点击事件。
一、html代码：

<!doctype html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<title>原生JS实现图片上传预览效果完美兼容各浏览器</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="ajaxfileupload.js"></script>
<script type="text/javascript" src="layer/layer.js"></script>
<script type="text/javascript" src="viewImage.js"></script>
<link rel="stylesheet" type="text/css" href="viewImage.css">
</head>
<body>
<table>
    <tr>
        <td style="width:100px">选择图片：</td>
        <td>
            <a href="javascript:void(0)" class="file" style="float:left;margin-right:10px">选择文件
                <input class="file" type="file" name="filePath" id="preFilePath" required="true" onchange="loadImageFile(this,3)"/>
            </a>
            <a href="javascript:void(0)" class="file">清空图片
                <input class="file" type="button" onclick="clearImages('preFilePath')"/>
            </a>
        </td>
    </tr>
</table>
<table>
    <tr>
        <td style="width:100px">图片预览：</td>
        <td style="height:200px">
            <ul id="preFilePathView" class="imgShow">
            </ul>
        </td>
    </tr>
</table>
<a href="javascript:void(0)" class="file">提交
    <input id="submitImg" class="file" type="button"/>
</a>
</body>
<script type="text/javascript">
$(document).ready(function(){
    //重置上传图片内容
    formDataJson={};
    //清除图片相关信息
    clearImages('preFilePath');
    //提交方法路径
    var uploadUrl='rest/xxx/xxx';
    $('#submitImg').click(function(){
        submitFiles(uploadUrl,{},function(){
            alert('提交成功！')
        });
    })
})
</script>
</html>

二、js代码：

/**
 * 注意事项：
 * 图片预览方法调用，id为当前上传图片的input控件id，预览图片的ul的id要写成id+View
 * 需要调用css样式file与imgShow，需引用viewImages.css文件
 * 在打开dialog的时候需要清空所有图片相关信息，并重置imagesFiles={}
 * 支持在火狐、谷歌下点击图片显示大图，IE下只支持在线预览、不支持点击图片显示大图
 * @author:LX
 * @time 2017-08-01 09:40:20
 */
实例：
选择图片按钮
//<table>
//  <tr>
//      <td style="width:100px">选择图片：</td>
//      <td>
//          <a href="javascript:;" class="file" style="float:left;margin-right:10px">选择文件
//              <input class="file" type="file" name="preFilePath" id="preFilePath" required="true" onchange="loadImageFile(this.id,5);"/>
//          </a>
//          <a href="javascript:;" class="file">清空图片
//              <input class="file" type="button" onclick="clearImages('preFilePath')"/>
//          </a>
//      </td>
//  </tr>
//</table>
图片预览：
//<table>
//  <tr>
//      <td style="width:100px">图片预览：</td>
//      <td style="height:200px">
//          <ul id="preFilePathView" class="imgShow">
//          </ul>
//      </td>
//  </tr>
//</table>
var imageFiles = {};
//用于显示大图
var imgDatas = {};
//存放图片信息
var formDataJson = {};
var uploadFileID;
var tempNum= 0;
var loadImageFile = (function(uploadFile, num) {
    if (window.FileReader) {
        var oPreviewImg = null,
        oFReader = new window.FileReader(),
        rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;
        return function(uploadFile, num) {
            uploadFileID = uploadFile.id;
            var imgData = imgDatas[uploadFileID];
            if (imgData == undefined) {
                imgData = [];
            }
            var tempArr = formDataJson[uploadFileID];
            if (tempArr != undefined && tempArr.length >= num) {
                alert('最多上传' + num + '张图片');
                return;
            }
            if (tempArr == undefined) {
                tempArr = [];
            }
            oFReader.onload = function(oFREvent) {
                var newPreview = document.getElementById(uploadFileID + "View");
                var node = document.createElement("LI");
                node.className = 'imgLi';
                newPreview.appendChild(node);
                oPreviewImg = new Image();
                $(oPreviewImg).click(function (){
                    showBigImg(this);
                });
                oPreviewImg.style.width = "200px";
                oPreviewImg.style.height = "200px";
                node.appendChild(oPreviewImg);
                oPreviewImg.src = oFREvent.target.result;
                var tempJson = {};
                tempJson['alt'] = '大图';
                tempJson['pid'] = oFREvent.target.result;
                tempJson['src'] = oFREvent.target.result;
                tempJson['thumb'] = '';
                imgData.push(tempJson);
                imgDatas[uploadFileID] = imgData;
            };

            var aFiles = document.getElementById(uploadFileID).files;
            if (aFiles.length === 0) {
                return;
            }
            if (!rFilter.test(aFiles[0].type)) {
                alert("请上传图片类型文件!");
                return;
            }
            oFReader.readAsDataURL(aFiles[0]);
            tempArr.push(uploadFile);
            formDataJson[uploadFileID] = tempArr;
            creatInput(uploadFile);
        }
    }
    if (navigator.appName === "Microsoft Internet Explorer") {
        return function(uploadFile, num) {
            uploadFileID = uploadFile.id;
            var tempArray = formDataJson[uploadFileID];
            if (tempArray != undefined && tempArray.length >= num) {
                alert('最多上传' + num + '张图片！');
                return;
            }
            if (tempArray == undefined) {
                tempArray = [];
            }
            var extArray = new Array(".gif", ".jpg", ".bmp", ".png", ".jpeg");
            var file = document.getElementById(uploadFileID).value;
            var file1 = file.slice(file.indexOf("\\") + 1);
            var ext = file1.slice(file1.indexOf(".")).toLowerCase();
            var allowSubmit = false;
            for (var i = 0; i < extArray.length; i++) {
                if (extArray[i] == ext) {
                    allowSubmit = true;
                    break;
                }
            }
            if (!allowSubmit) {
                alert("请上传图片类型文件!");
                return;
            }
            var node = document.createElement("LI");
            node.className = 'imgLi';
            document.getElementById(uploadFileID + 'View').appendChild(node);
            node.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = file;
            tempArray.push(uploadFile);
            formDataJson[uploadFileID] = tempArray;
            creatInput(uploadFile);
        }
    }
})();
//隐藏input创建新input
function creatInput(uploadFile) {
    tempNum++;
    $(uploadFile).hide();
    var tempId = uploadFile.id;
    $(uploadFile).attr('id', "temp" + tempNum);
    var inputTemp = document.createElement("INPUT");
    inputTemp.type = 'file';
    inputTemp.name = 'filePath';
    inputTemp.id = tempId;
    $(inputTemp).addClass('file');
    $(uploadFile).parent()[0].appendChild(inputTemp);
    if ($(inputTemp)[0].onchange == null) {
        $(inputTemp).on('change',
        function() {
            loadImageFile($(inputTemp)[0], 3);
        });
    }
}
//图片提交方法
function submitFiles(url, data, func) {
    var loadingPross = layer.msg('提交中……', {
        icon: 16,
        shade: 0.01,
        time: 0 //1000*60*60*24 //2秒关闭（如果不配置，默认是3秒）
    });
    for (var fileInputId in formDataJson) {
        var formDataList = formDataJson[fileInputId];
        for (var i = 0; i < formDataList.length; i++) {
            var input = formDataList[i];//获取到图片文件
            $.ajaxFileUpload({
                url: url,
                secureuri: false,
                data: data,
                fileElementId: input.id,
                dataType: 'JSON',
                success: function(result) {
                    var resultData = $.parseJSON(result);
                    if (resultData.success) {
                        if (func != undefined && func != '') {
                            func();
                        }
                    } else {
                        alert("上传失败");
                    }
                },
                error: function(result) {
                    alert("上传失败");
                },
                complete: function(XMLHttpRequest, textStatus) {
                    layer.close(loadingPross);
                }
            });
        }
    }
}
//删除所有图片
function clearImages(id) {
    var bigImgArr = imgDatas[id];
    if (bigImgArr != undefined && bigImgArr.length > 0) {
        bigImgArr.splice(0, bigImgArr.length);
    }
    var formDataList = formDataJson[id];
    if (formDataList != undefined && formDataList.length > 0) {
        formDataList.splice(0, formDataList.length);
    }
    $('#' + id + 'View').off('click', 'li');
    $('#'+id+'View').html('');
}
//显示大图
function showBigImg(file) {
    var viewId=$(file).parents()[1].id;
    var viewIndex=viewId.indexOf("View");
    var id=viewId.substring(0,viewIndex);
    var imgData = imgDatas[id];
    var json = {
        "title": "大图展示",
        //相册标题
        "id": id,
        //相册id
        "start": 0,
        //初始显示的图片序号，默认0
        "data": imgData
    };
    layer.photos({
        photos: json,
        //格式见API文档手册页
        anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机
    });
}

三、css代码：

@CHARSET "UTF-8";
.imgShow{
    list-style:none;
}
.imgShow li{
    margin-left:5px;
    width: 200px;
    height: 200px;
    float: left;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
    border:1px solid #a9c9e2;
    background:#e8f5fe;
}
.file {
    position: relative;
    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; display:block;
    width:100px;
    text-align:center;       
}
.file input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0; 
    width:130px;
    height:30px; 
    background-color:#D0EEFF opacity:0.5;
    filter:alpha(opacity=-250); 
}
.file:hover {
    background: #AADFFD;
    border-color: #78C3F3;
    color: #004974;
    text-decoration: none;
}

四、效果图：

IE下效果：
IE下预览
火狐下效果：
火狐下预览
浏览器中都可以正确的现实图片
五、点击提交按钮进行图片提交，多张图片通过循环调用ajaxfileupload多次访问后台进行图片提交。①java代码中正常按照ajaxfileupload方式去接受即可。②注意接收图片文件的文件域为file控件的name属性值filePath。③因参数为表单方式提交，所以java中必须使用request.getParameter(“xx”)方式获取上传的参数。
附文章中源码地址：http://download.youkuaiyun.com/download/lxacdf/9932475
如果文章中有不正确的地方，欢迎大家指正！