java使用FileReader上传图片,可支持预览,支持多张上传

原创 2015年11月17日 17:02:00

效果图:

样式:

.thumb {
        height: 75px;  /*给缩略图指定单个维度,浏览器自动等比缩放*/
        border: 1px solid #000;
        margin: 10px 5px 0 0;
     }

html代码:

<div class="input">上传照片:
                    <input type="file" id="Files"  name="imageFiles" accept="image/*" multiple />
                        <ul id="Errors"></ul>
                        <div style="color: #ccc; font-size: 10px;">如果需要查看原始尺寸图片,可点击相应图片;再次单击该图片,则恢复小图片。</div>
                        <div id="Preview"></div>
                </div>

注意一定要在form上加上enctype="multipart/form-data"属性


js代码:

(function($) {
    function fileSelect(e) {
        $('#Preview').html('');
        e = e || window.event;
        
        var files = e.target.files;  //FileList Objects        
        var ireg = /image\/.*/i,
            p = document.getElementById('Preview');
            
        var ul = document.getElementById('Errors');
        for(var i = 0, f; f = files[i]; i++) {
            if(!f.type.match(ireg)) {
                var size = f.size;
                if(size > 3072000){
                    alert("图片大小不能超过3M,请重新选择.");
                    return ;
                }
                //设置错误信息
                var li = document.createElement('li');
                li.innerHTML = '<li>' + f.name +'不是图片文件.</li>';
                
                ul.appendChild(li);
                
                continue;
            }
            
            var reader = new FileReader();
            
            reader.onload = (function(file) {
                return function(e) {
                    var span = document.createElement('span');
                    span.innerHTML = '<img class="thumb" src="'+ this.result +'" alt="'+ file.name +'" />';
                    p.insertBefore(span, null);
                    
                };
            })(f);
            //读取文件内容
            reader.readAsDataURL(f);
        }
    }
        
    if(window.File && window.FileList && window.FileReader && window.Blob) {
        document.getElementById('Files').addEventListener('change', fileSelect, false);
        
        document.getElementById('Preview').addEventListener('click', function(e) {
            if(e.target.tagName.toLowerCase() == 'img' && e.target.className == 'thumb') {
                e.target.className = '';
            }  else if(e.target.tagName.toLowerCase() == 'img' && e.target.className == '') {
                e.target.className = 'thumb';
            }
        });
    } else {
        document.write('您的浏览器不支持File Api');
    }
})(jQuery);



后台代码:

@RequestMapping("saveVipQuestion")
    public String auth(VipQuestion vipQuestion, Model model, HttpServletRequest request, HttpServletResponse response) {
        MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
        List<MultipartFile> mFiles= multipartRequest.getFiles("imageFiles");
        String imageUrl =FileUtils.uploadFile(mFiles,request,response);

     
    }


//工具类上传方法

public static String uploadFile(List<MultipartFile> mFiles, HttpServletRequest request,
            HttpServletResponse response) {
        String imageUrl = "";
        if (mFiles != null && !mFiles.isEmpty()) {
            String realPath = SystemProperties.FILE_SHARE_ROOT;
            //String realPath = "D:/sql/";//测试文件夹
            StringBuffer imagesUrl = new StringBuffer();
            for (int i = 0; i < mFiles.size(); i++) {
                CommonsMultipartFile  mFile = (CommonsMultipartFile) mFiles.get(i);
                 String fileName = mFile.getFileItem().getName();
                 Date now = new Date();
                 String original = "ggzj/question/" + DateUtil.formatDate(now, "yyyyMM") + "/" + fileName;
                 imagesUrl.append(original+",");
                 String outputPath = realPath + original;
                 try {
                     long fileLength = writeFile(mFile.getInputStream(), outputPath);
                 } catch (Exception e) {
                     logger.error("上传图片失败:{}", fileName, e);
                 }
            }
            imageUrl = imagesUrl.toString();
        }
        return imageUrl;
    }


通过 html5 FileReader 实现上传图片预览功能

Html 部分 JS部分 function showPre...
  • sinat_25926481
  • sinat_25926481
  • 2016年03月27日 21:23
  • 2173

HTML5 FileReader多图预览 Ajax多图异步上传ThinkPHP接收

最近在做一个多图上传的功能,就想试试用html5的FileReader接口来实现上传前的预览,利用FormData包装多张图片,提交给ThinkPHP后台,找了一些网上的例子,然后自己根据实际需求改了...
  • eoesoft
  • eoesoft
  • 2015年01月17日 21:59
  • 1716

html5 手机端异步上传预览图片(文件) FileReader对象

在html5范围之内,通过FileReade接口可以直接先预览图片,然后通过php上传存储在服务器 FileReader接口原理: 通过FileReader,可以异步地将本地图片文件加...
  • liuwenbin1984
  • liuwenbin1984
  • 2015年06月11日 13:52
  • 3415

HTML5使用FileReader预览上传的图片文件

  • oak160
  • oak160
  • 2016年11月22日 20:11
  • 1247

FileReader多图片上传

上传多张图片 .img-div{ float: left; line-height: 1; ...
  • wjy199506
  • wjy199506
  • 2017年03月14日 17:19
  • 217

FileReader+Ajax+PHP实现异步上传图片和预览

原理: 1.利用html5开放的FileReader来获取图片并编码 2.将编码后的数据通过ajax异步发送到PHP服务端 3.服务端接收数据后解码图片信息,利用PHP内置函数file_put_con...
  • ding_zhi_jie
  • ding_zhi_jie
  • 2016年12月05日 17:24
  • 1661

vue上传图片组件(支持拖拽文件夹上传)

1.获取拖拽上传对象 drop(el) { el.stopPropagation(); el.preventDefault(); this.fileList(el.dataTransfe...
  • qq_26744901
  • qq_26744901
  • 2017年09月29日 14:35
  • 251

input[type="files"]上传多图片文件并预览

yy
  • sinat_19803127
  • sinat_19803127
  • 2018年01月12日 15:33
  • 63

H5实现多图片预览上传,可点击可拖拽控件介绍

在做图片上传时发现一个蛮好用的控件,支持多张图片同时上传,可以点击选择图片,也可以将图片拖拽到上传框直接上传,方便,好用,接口也简单,基本可以直接放到项目里使用。 先看看他的样式: ...
  • weixin_36380516
  • weixin_36380516
  • 2017年04月22日 10:23
  • 4065

C#上传图片 支持多张上传

protected void Page_Load(object sender, EventArgs e)     {         string filepath = Server.MapPat...
  • xyy410874116
  • xyy410874116
  • 2013年08月05日 14:57
  • 1586
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:java使用FileReader上传图片,可支持预览,支持多张上传
举报原因:
原因补充:

(最多只允许输入30个字)