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预览上传的图片文件

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

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

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

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

在上传图片到服务器之前,我们希望可以预览一下要上传的图片。这个功能可以通过HTML5 的FileReader()方法来实现。 FileReader是HTML5 File API的一部分。它实现了一种...

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

在上传图片到服务器之前,我们希望可以预览一下要上传的图片。这个功能可以通过HTML5 的FileReader()方法来实现。 FileReader是html5 File API的一部分。它实现了一种...

IOS 利用AFN上传图片,支持多张、单张上传

多张 单张 图片 上传

FileReader实现上传图片时的图片预览

为什么要使用FileReader?在html静态文件中,当我们在input文件选择框中选择一个文件时,该input框的值为文件的绝对路径,这个时候我们可以直接将该路径复制给我们需要预览的图片的src即...

AFNetworking上传图片和视频(支持多张图片上传)

1使用AFNetworking上传图片和视频,支持多张图片上传。以下是AFNetworking用于上传文件的关键函数。 /** @param data 图片或视频二进制数据 @param name...

利用html5的FileReader对象实现图片预览,利用FormData对象结合struts2实现无刷新文件上传(多参数)

1、页面内容如下:                                                         文件内容变化就调用getImgUrl方法,获取变化后的文件,然...
  • lizi530
  • lizi530
  • 2016年06月17日 10:48
  • 2156

html之file标签 --- 图片上传前预览 -- FileReader

通过file标签和js的FileReader接口,把选择的图片文件调用readAsDataURL方法,把图片数据转成base64字符串形式显示在页面上。 ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:java使用FileReader上传图片,可支持预览,支持多张上传
举报原因:
原因补充:

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