关于文件上传的一些控件

1、Layui，这里兼容了系列的操作，上传，弹出等等的功能，这里做上传的简单介绍
连接：https://www.layui.com/doc/modules/upload.html

步骤：1.下载相关的js文件等等
2.引入到页面上
3.在页面上写相关的控件

这里直接从步骤3开始：

需要在spring-mvc中配置：
<!-- 配置文件上传，如果没有使用文件上传可以不用配置，当然如果不配，那么配置文件中也不必引入上传组件包 -->
	<bean id="multipartResolver"  
        class="org.springframework.web.multipart.commons.CommonsMultipartResolver">  
        <!-- 默认编码 -->
        <property name="defaultEncoding" value="utf-8" />  
        <!-- 文件大小最大值 -->
        <property name="maxUploadSize" value="10485760000" />  
        <!-- 内存中的最大值 -->
        <property name="maxInMemorySize" value="1" />  
        <!--<property name="uploadTempDir" value="/temp/" />-->
    </bean>
html:
<script>
    // layui文件上传
    layui.use('upload', function(){
        var upload = layui.upload;    //这个是声明哟啊干什么，upload是上传

        //执行实例
        var uploadInst = upload.render({
            elem: '#attachment' //绑定元素  就是按钮的所在地
            ,data: {
                id:'HeadPortrait'
            }
            ,url: projectName + '/base/fileC/uploadTempOpen' //上传接口
            ,method: 'post'
            ,accept: 'images'
            ,acceptMime: 'image/*'
            // ,auto: false // 不自动上传
            // ,bindAction: '#saveBtn'
            ,before: function(obj){    //回调函数，
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#preShow').attr('src', result); //图片链接（base64）
                });
            }
            ,done: function(res){        //回调成功之后的方法
                console.log(res);
                if (res.success) {
                    personalVm.personalInfo.photoPath=res.result.filePath;
                    console.log(personalVm.personalInfo.photoPath);
                    layer.msg('文件已上传', {icon: 1});
                } else {
                    layer.alert("上传失败");
                }
            }
            ,error: function(){         //回调失败之后的方法
                //请求异常回调
                layer.alert("上传失败");
            }
        });
    });
</script>
//注意：所有的回调函数，成功之后都可以用于图片的回显比如：before

java:
@Override
    public Message saveTempFilesOpen(MultipartFile[] file,String id)  {
        Message message = new Message();
        Map<String, Object> fm = new HashMap<String, Object>();
        Message m = new Message();
        try {
            if (file != null && file.length > 0) {
                // Date createTime = DateUtil.getCurrentDate(DateUtil.DATE_STYLE5);

                for (int i = 0; i < file.length; i++) {
                    MultipartFile f = file[i];
                    // 文件名
                    String fileName = f.getOriginalFilename();
                    // 保存后的文件名
                    String diskFileName = StringContentUtil.getUuid();
                    CommonsMultipartFile cf = (CommonsMultipartFile) f;
                    DiskFileItem fi = (DiskFileItem) cf.getFileItem();
                    File f1 = fi.getStoreLocation();
                    m = FileOperationUtil.saveFileToDisk(f1, fileName,
                            diskFileName, "/bbs/photo/upload/" + id);

                    /*
                     * 返回文件url地址
                     */

                    if (m.getSuccess()) {
                        try {
                            fm.put("fileUrl", (String) m.getResult().get("filePath"));
                            message.setSuccess(true);
                            message.setResult(fm);

                            // 删除文件
                            // FileOperationUtil.deleteFile2(path);
                        } catch (Exception e) {
                            Object o = m.getResult().get("savefile");

                            File ef = (File) o;
                            if (ef.exists()) {
                                ef.delete();
                            }
                            throw e;
                        }
                    }
                }
            }
            message.setResult(fm);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return m;
    }
html:
<div>
				<button type="button" class="layui-btn" id="photo">
					<i class="layui-icon">&#xe67c;</i>   上传图片的按钮
				</button>
			</div>
			<!--预览区域-->
			<div class="layui-upload-list">   图片预览区域
	　　　　　　<img class="layui-upload-img" width="100px" height="80px" id="preShow"/>
	　　　　</div>