欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

html5 多图预览

程序员文章站 2022-07-13 11:01:30
...

html5 多图预览


html5 多图预览
            
    
    博客分类: html5javascript html5多图预览预览多图 
 

如何实现呢?

页面加载完成之后,绑定事件:

 //预览图片,没有真正上传
            com.whuang.hsj.previewLocalDiskImageMultiple($('#pic-file'), $("#previewImage"),function () {
                if(uploadStatus==0) {//只要ajax上传成功一次,则不再校验.防止点击了选择图片,忘了ajax上传图片的情况
                    uploadStatus=1;
                }
            },6/*单位是M*/);

 com.whuang.hsj.previewLocalDiskImageMultiple的实现如下:

com.whuang.hsj.imgURL = null;
var URL = null;
var getImgUrl = function (file) {
    URL = window.URL || window.webkitURL;
    /*if (com.whuang.hsj.imgURL != null) {
     URL.revokeObjectURL(com.whuang.hsj.imgURL);//free the memory;
     }*/
    com.whuang.hsj.imgURL = URL.createObjectURL(file);
//                    $('body').append($('<img/>').attr('src', imgURL));
    var imgUrl2 = com.whuang.hsj.imgURL;
    return imgUrl2;
};

com.whuang.hsj.previewLocalDiskImageMultiple = function ($fileElement, $previewImage, callback, maxSizeM) {
    $fileElement.change(function (event) {
        var eventTarget = com.whuang.hsj.getSrcElement(event);
        var files = eventTarget.files;
        if (!maxSizeM) {
            maxSizeM = 2;
        }
        if (files && files.length > 0) {
            var $parentDiv = $previewImage.parent();
            $parentDiv.empty();
            for (var i = 0; i < files.length; i++) {
                var file = files[i];
                //console.log(file);

                /*if (file.size > 1024 * 1024 * maxSizeM) {
                 alert('image size Can\'t be more than ' + maxSizeM + 'MB');
                 event.returnValue = false;
                 return false;
                 }*/
                var imgUrl2 = getImgUrl(file);
                if ($parentDiv && $parentDiv.length && imgUrl2) {
                    $parentDiv.append($('<img style="max-width: 100%;" alt="暂无预览图片" id="previewImage" src="' + imgUrl2 + '"><hr color="red">'));
                }
            }

            if (typeof callback === 'function') {
                callback(com.whuang.hsj.imgURL);
            }
        }
    });
};

 上传图片的表单:

<form action="/image/upload" id="pic-form"  method="post" enctype="multipart/form-data" >
                            <input type="file" id="pic-file" name="image223" multiple > <br><br>
                            <input type="button" onclick="ajaxUploadFile(this)" id="upload_pic" value="ajax上传图片" > <span  id="upload_result_tip" ></span>
                        </form>

 

可以直接调用js:

http://blog.yhskyc.com/convention2/static/js/common_util.js

 

  • html5 多图预览
            
    
    博客分类: html5javascript html5多图预览预览多图 
  • 大小: 435.5 KB