多文件上传（fileinput插件）

最新推荐文章于 2024-04-24 01:09:50 发布

imaxonor

最新推荐文章于 2024-04-24 01:09:50 发布

阅读量435

点赞数

分类专栏：文件上传

本文链接：https://blog.csdn.net/qq_39444339/article/details/81260401

版权

文件上传专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、html页面

<link rel="stylesheet" href="fileinput/css/fileinput.min.css" />
<script type="text/javascript" src="fileinput/js/fileinput.min.js"></script>
<script type="text/javascript" src="fileinput/js/zh.js"></script>
<!-- 引入fileinput的初始化js代码 -->
<script type="text/javascript" src="fileinput/myinput/my_fileinput.js"></script>

<body>
    
	
<!-- 添加附件 -->
<div class="modal-body">
<!-- <input type="file" name="reportFile" id="reportFile" multiple class="file" />
 class="file" 会影响中文显示-->
<input  type="file"  id="input-id"  name="file" multiple="multiple"  data-preview-file-type="text">
</div>

</body>

二、js代码

$(document).ready(function(){
 //0.初始化fileinput
    var oFileInput = new FileInput();
    oFileInput.Init("input-id", "/uploadMyFile");//第一个参数是input输入的id，第二个是上传的url  
 });

var FileInput = function () {
			    var oFile = new Object();
			
			    //初始化fileinput控件（第一次初始化）
			    oFile.Init = function(ctrlName, uploadUrl) {
					    var control = $('#' + ctrlName);
					
					    //初始化上传控件的样式
					    control.fileinput({
					        language: 'zh', //设置语言
					        uploadUrl: uploadUrl, //上传的地址
					        allowedFileExtensions: ['gif','jpg', 'png','txt','doc'],//接收的文件后缀
					        showUpload: true, //是否显示上传按钮
					        showCaption: false,//是否显示标题
					        browseClass: "btn btn-primary", //按钮样式     
					        //dropZoneEnabled: false,//是否显示拖拽区域
					        //minImageWidth: 50, //图片的最小宽度
					        //minImageHeight: 50,//图片的最小高度
					        //maxImageWidth: 1000,//图片的最大宽度
					        //maxImageHeight: 1000,//图片的最大高度
					        maxFileSize: 300,//单位为kb，如果为0表示不限制文件大小
					        //minFileCount: 0,
					        layoutTemplates :{                  
                  　　　　				actionUpload:'',//去除上传预览缩略图中的上传图片；   
                  				actionZoom:''//去除上传预览缩略图中的上传图片；
                  			},
					        maxFileCount: 10, //表示允许同时上传的最大文件个数
					        enctype: 'multipart/form-data',
					        validateInitialCount:true,
					        previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
					        msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！"
					    });
					$("#input-id").on('filepreupload', function(event, data, previewId, index) {     //上传中
			            var form = data.form, files = data.files, extra = data.extra,
			            response = data.response, reader = data.reader;
			            console.log('文件正在上传');
			        });
			        $("#input-id").on("fileuploaded", function (event, data, previewId, index) {    //一个文件上传成功
			            console.log('文件上传成功1！');
			            
			            
			        });
			        $("#input-id").on('fileerror', function(event, data, msg) {  //一个文件上传失败
            		console.log('文件上传失败！'+data);
			        });	  
			}
			return oFile;

三、后台controller

/**
     * 上传文件
     * @param request
     * @param response
     * @param file 上传的文件，支持多文件
     * @throws Exception
     */
    @RequestMapping("/uploadMyFile")
    public void insert(HttpServletRequest request,HttpServletResponse response,@RequestParam("file") MultipartFile[] file) throws Exception{
    	PrintWriter writer = response.getWriter();
    	if(file!=null&&file.length>0){
            //组合image名称，“;隔开”
            List<String> fileName =new ArrayList<String>();
   
            try {
                for (int i = 0; i < file.length; i++) {
                    if (!file[i].isEmpty()) {

                        //上传文件，随机名称，";"分号隔开
                        fileName.add(FileUtil.uploadImage(request, "/upload/"+TimeUtils.formateString("yyyy-MM-dd")+"/", file[i], true));
                    }
                }

                //上传成功
                if(fileName!=null&&fileName.size()>0){
                     Gson gson = new Gson();
                	String json = gson.toJson("");//得到最大值后将其写入前端，这里暂时没写
                     writer.print(json);这里必须是Json数据
                }else {
                    writer.print("上传失败！文件格式错误！");这里必须是Json数据
                }
                
            } catch (Exception e) {
                e.printStackTrace();
                writer.print("上传出现异常！异常出现在：class.UploadController.insert()");这里必须是Json数据
            }
        }else {
            writer.print("没有文件");这里必须是Json数据
        }
    }

四、文件上传的Utils

public class FileUtil {
	
	/**
     * 上传文件
     *  原名称
     * @param request 请求
     * @param path_deposit 存放位置(路径)
     * @param file 文件
     * @param isRandomName 是否随机名称
     * @return 完整文件路径
     */
    public static String uploadImage(HttpServletRequest request,String path_deposit,MultipartFile file,boolean isRandomName) {
        //上传
        try {
            String[] typeImg={"gif","png","jpg","txt","doc"};

            if(file!=null){
                String origName=file.getOriginalFilename();// 文件原名称
                System.out.println("上传的文件原名称:"+origName);
                // 判断文件类型
                String type=origName.indexOf(".")!=-1?origName.substring(origName.lastIndexOf(".")+1, origName.length()):null;
                if (type!=null) {
                    boolean booIsType=false;
                    for (int i = 0; i < typeImg.length; i++) {
                        if (typeImg[i].equals(type.toLowerCase())) {
                            booIsType=true;
                        }
                    }
                    //类型正确
                    if (booIsType) {
                        //存放图片文件的路径
                        String path=request.getSession().getServletContext().getRealPath(path_deposit);
                        //组合名称
                        String fileSrc=""; 
                        //是否随机名称
                        if(isRandomName){
                        	
                            origName=TimeUtils.formateString("yyyy-MM-dd-")+UUID.randomUUID().toString()+origName.substring(origName.lastIndexOf("."));
                        }
                        //判断是否存在目录
                        File targetFile=new File(path,origName);
                        if(!targetFile.exists()){
                            targetFile.mkdirs();//创建目录
                        }
                        //上传
                        file.transferTo(targetFile);
                        //完整路径
                        fileSrc=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+path_deposit+origName;
                        System.out.println("图片上传成功:"+fileSrc);
                        return fileSrc;
                    }
                }
            }
            return null;
        }catch (Exception e) {
            e.printStackTrace();
            return null;
        }
    }
	

}

五、pom中需要添加的包

	<dependency>
  		<groupId>commons-fileupload</groupId>
  		<artifactId>commons-fileupload</artifactId>
  		<version>1.3.2</version>
  	</dependency>

  	<dependency>
  		<groupId>commons-io</groupId>
  		<artifactId>commons-io</artifactId>
  		<version>2.3</version>
  	</dependency>

六、Springmvc的配置

<bean id="multipartResolver"
		class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
		<property name="defaultEncoding" value="utf-8"></property>
		<property name="maxUploadSize" value="10485760000"></property>
		<property name="maxInMemorySize" value="40960"></property>
</bean>

imaxonor

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
多文件上传（fileinput插件）

一、html页面<link rel="stylesheet" href="fileinput/css/fileinput.min.css" /><script type="text/javascript" src="fileinput/js/fileinput.min.js"></script><script type="text/javascr...
复制链接

扫一扫

专栏目录