文件上傳

時間  2019-12-06
標籤 文件 上傳 简体版
原文   原文鏈接

[TOC]javascript

示例一：

【1】頁面js：

/*
上傳附件
docObj:文件對象
appid：cid
apptypeid：一、blog 二、
busitype：100——表明附件
*/
function uploadAttachment(docObj){
    var appid = $("#appid").val();
    var files =docObj.files;
    var formData = new FormData();//經過對象傳輸到後臺
    formData.append("appid",appid);//用於sysfile插入數據的appid
    for (var i = files.length - 1; i >= 0; i--) {
        formData.append("files[]",files[i]);
    }
    $.ajax({
        data : formData,
        type : "POST",
        url : "/common/xxx/upload",
        cache : false,
        processData: false,                // jQuery不要去處理髮送的數據
        contentType: false,                // jQuery不要去設置Content-Type請求頭
        dataType: 'JSON',
        success: function(data) {//data是返回的hash,key之類的值，key是定義的文件名
            //查詢
            $('#attachment').bootstrapTable('refresh');
            attachment(appid);
        },
        error:function(){
            toastr.error("上傳失敗");
        }
    });
}

【2】spring mvc後臺接收多文件：

//下面新增自定義方法
@ResponseBody
@PostMapping("/upload")
R upload(@RequestParam("files[]") MultipartFile[] files,@RequestParam("appid") String appid) throws IOException, Exception {
    //多個附件上傳
    for (int i = 0; i < files.length; i++) {
        System.out.println(i);
        String fname = files[i].getOriginalFilename();
//                String fileName = FileUtil.renameToUUID(fname);//換成uuid——也是惟一，好找圖片
        String uuid = UUID.randomUUID().toString().replace("-", "");
        String fileType = fname.substring(fname.lastIndexOf(".") + 1, fname.length()).toLowerCase();
        String fileName = uuid+"."+fileType;//cf6ec8ccb62e451e8d5f27dab6bfeb3f.png
        FileUtil.uploadFile(files[i].getBytes(),tuodataConfig.getUploadPublicPath()+"blog/", fileName);
        FileDO fileDo= insertFile(appid,uuid,0,fname,fileName,fileType);
    }
    return R.ok();
}

示例二：

layui圖片上傳html

【1】單張

html:
<body>
    <input type="hidden" name="rotationChartId" id="rotationChartId" value="#(rotationChart.id)" />
    <input type="hidden" name="mToken" value="#(mToken)" />

    <div class="layui-form-item">
        <label class="layui-form-label">輪播圖片</label>
        <div class="layui-input-block">
            <input type="hidden" name="image" id="image" />
            <button type="button" class="layui-btn layui-btn-normal" id="chooseFile">選擇文件</button>
            <div class="fileinput-new thumbnail" style="max-width: 200px; max-height: 150px;">
                <img #if(rotationChart.value==null) src="#(ctx)/assets/img/no.png" #else src="#(ctx)#(rotationChart.value)" #end id="demo1" />
            </div>
        </div>
    </div>
</body>


js:
新增的js腳本：
<script>
    layui.config({
        base: '#(ctx)/assets/layuiadmin/' //靜態資源所在路徑
    }).extend({
        index: 'lib/index' //主入口模塊
    }).use(['index', 'form', 'laydate', 'upload'], function() {
        var $ = layui.$,
            admin = layui.admin,
            element = layui.element,
            layer = layui.layer,
            laydate = layui.laydate,
            form = layui.form,
            upload = layui.upload;

        // layui圖片上傳（單張）
        upload.render({
            elem: '#chooseFile',
            url: '#(curl)/rotationChartSave',
            auto: false,
            bindAction: '#submit', // 觸發事件
            headers: {
                sessionId: '#(ac.sessionId)',
                menuId: '#(menuId)'
            },
            choose: function(obj) { //選擇文件的回調，obj爲選中的文件
                //將每次選擇的文件追加到文件隊列
                var files = obj.pushFile();

                //預覽選中的文件（本地文件）
                obj.preview(function(index, file, result) {
                    $('#demo1').attr('src', result);
                });
            },
            done: function(data) {
                if(data.code == 1) {
                    window.location.reload();
                } else if(data.code == 2) {
                    location.href = '#(ctx)/system/toLogin';
                }
                parent.layer.msg(data.desc, {
                    offset: '80%'
                });
                layer.closeAll('loading');
            }
        });
    });
</script>

編輯的js腳本：
<script>
    layui.config({
        base: '#(ctx)/assets/layuiadmin/' //靜態資源所在路徑
    }).extend({
        index: 'lib/index' //主入口模塊
    }).use(['index', 'form', 'laydate', 'upload'], function() {
        var $ = layui.$,
            admin = layui.admin,
            element = layui.element,
            layer = layui.layer,
            laydate = layui.laydate,
            form = layui.form,
            upload = layui.upload;
        
        // 經過formData進行傳遞數據
        var formData = new FormData($("#form")[0]);
        
        // layui圖片上傳（單張）
        upload.render({
            elem: '#chooseFile',
            url: '#(curl)/rotationChartUpdate',
            auto: false,
            bindAction: '#submit',
            data: {"rotationChartId":formData.get("rotationChartId")},// 經過屬性進行獲取值
            headers: {
                sessionId: '#(ac.sessionId)',
                menuId: '#(menuId)'
            },
            choose: function(obj) { //選擇文件的回調，obj爲選中的文件
                //將每次選擇的文件追加到文件隊列
                var files = obj.pushFile();

                //預覽選中的文件（本地文件）
                obj.preview(function(index, file, result) {
                    $('#demo1').attr('src', result);
                });
            },
            done: function(data) {
                if(data.code == 1) {
                    window.location.reload();
                } else if(data.code == 2) {
                    location.href = '#(ctx)/system/toLogin';
                }
                parent.layer.msg(data.desc, {
                    offset: '80%'
                });
                layer.closeAll('loading');
            }
        });
    });
</script>

後臺代碼：
/**
 * 輪播圖保存 
 */
@Before(value = { JMSystemApiInterceptor.class })
public void rotationChartSave() {
    String image = JMUploadKit.fileUpload(this, "file", "rotationChart");

    Configure rotationChart = new Configure();
    SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
    rotationChart.setValue2(sdf.format(new Date()));
    boolean result = false;
    if (image != null) {
        rotationChart.setName("rotationChart");
        rotationChart.setValue(image);
        result = configureDao.save(rotationChart);
    }
    if (result) {
        // 給type跟desc賦值
        Configure rotationChart1 = configureDao.get(false);
        rotationChart.setType(rotationChart1.getType() + 1);// 獲取最後一個type
        rotationChart.setDesc("輪播圖-" + (rotationChart1.getType() + 1));
        rotationChart.update();
        JMResult.success(this, "新增成功");
    } else {
        JMResult.fail(this, "新增失敗");
    } 
}
/**
 * 輪播圖更新 
 */
@Before(value = { JMSystemApiInterceptor.class })
public void rotationChartUpdate() {
    String image = JMUploadKit.fileUpload(this, "file", "rotationChart");
    Integer rotationChartId = getParaToInt("rotationChartId",null);
    Configure rotationChart = new Configure();
    
    Configure rotationChart1 = configureDao.getById(rotationChartId);
    SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
    boolean result = false;// 標識是否報錯
    if (image != null) {
        if (rotationChart1.getValue() != null)
            ToolUpload.deleteFile(rotationChart1.getValue());
        rotationChart.setId(rotationChartId);
        rotationChart.setValue(image);
        rotationChart.setValue2(sdf.format(new Date()));// 記錄更新時間
        result = configureDao.update(rotationChart);
    }
    if (result) {
        JMResult.success(this, "修改爲功");
    } else {
        JMResult.fail(this, "修改失敗");
    }
}

【2】多張

參考文章路徑：https://www.layui.com/demo/up...java

示例三

【1】oss上傳圖片

<c:set var="oss" value="https://wenbang.oss-cn-hangzhou.aliyuncs.com" />

<div class="form-group">
        <label class="control-label col-md-3">引導頁</label>
        <div class="col-md-6">
            <div class="fileinput fileinput-new" data-provides="fileinput">
                                           <!--回顯數據庫圖片-->
                <div class="fileinput-new thumbnail" style="max-width: 200px; max-height: 150px;">
                    <img src="
                        <c:if test="${ydy.value == null}">${ctx}/assets/global/img/no.png</c:if>
                        <c:if test="${ydy.value != null}">${oss}${ydy.value}</c:if>" 
                        alt="" />
                </div>
                                           <!--選擇本地圖片後回顯-->
                <div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px;"></div>
                <div>
                    <span class="btn default btn-file"> 
                        <span class="fileinput-new"> 選擇圖片 </span> 
                        <span class="fileinput-exists"> 改變 </span> 
                        <input type="file" name="image">
                    </span> 
                    <a href="javascript:;" class="btn red fileinput-exists" data-dismiss="fileinput"> 刪除 </a>
                </div>
            </div>
            <div class="clearfix margin-top-10">
                <span class="label label-danger">NOTE!</span> 兼容 IE10+, FF3.6+, Safari6.0+, Chrome6.0+ and Opera11.1+.以上的瀏覽器
            </div>
        </div>
    </div>
後臺代碼：
String ossFileUpload = ToolUpload.OSSFileUpload(this, "image", "configure");
地址：wenbang/upload/configure/20190116/xxx.jpg
page 頁面顯示縮略圖：
<td>
    <img src="<c:if test="${obj.value == null}">${ctx}/assets/global/img/no.png</c:if><c:if test="${obj.value != null}">${oss}${obj.value}</c:if>" style="max-width: 26px; max-height: 22px;">
</td>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程