ajax异步上传word以及pdf文件文档

最新推荐文章于 2021-08-06 16:23:58 发布

转载最新推荐文章于 2021-08-06 16:23:58 发布 · 1.6k 阅读

文章标签：

#异步上传 #word文件上传 #pdf文件上传

文件上传专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了一种前端异步上传Word和PDF文件的方法，利用plupload库实现单文件上传，展示如何设置上传限制、进度条及后台处理流程。

底层方法也是百度看到的，自己做的改动！看到之前的大神说转载需要说明，我也不知道什么意思，反正是转载的不是原创，底层是百度看到的，自己做了许多改动！

废话不多说，转入正题！我也是做一个整理留着以后用！我是个小萌新，

前端代码来一波，不要问我的代码为什么是这样！

<p>
    <label>主报告（word）：</label>
    <input type="text" id="showFile"  readonly>
    <input type="hidden" name="wordUrl"  id="showFiles" class="required" value="${pageMap.issue[0].word_url}"/>
    <button class="flat_blue_highlight btn_select" id="selectFile">选择文件</button>
    <span  id="shangchuans"  style="border:1px solid #ccc;width: 100px;height: 10px;display: inline-block;"></span><span id="chuanzhis">0%</span>
</p>
<p>
    <label>主报告（pdf）：</label>
    <input type="text" id="showFilePDF" readonly >
    <input type="hidden" name="pdfUrl"  id="showFilePDFs"  class="required" value="${pageMap.issue[0].pdf_url}"/>
    <button class="flat_blue_highlight btn_select" id="selectFilePDF">选择文件</button>
    <span  id="shangchuan"  style="border:1px solid #ccc;width: 100px;height: 10px;display: inline-block;"></span><span id="chuanzhi">0%</span>
</p>

JS代码，我自己分了两块，因为我添加和编辑用的是同一个页面！编辑时从后台获取文件名显示赋值

<script>
    <c:if test="${not empty pageMap.issue[0].word_url}">
    var showFile="${pageMap.issue[0].word_url}".split("|");
    document.getElementById('showFile').value=showFile[1];
    var showFilePDF="${pageMap.issue[0].pdf_url}".split("|");
    document.getElementById('showFilePDF').value=showFilePDF[1];</c:if>
</script>

JS上传时的判定，导入一个JS文件

<script src="${base}/js/plupload-master/js/plupload.full.min.js"></script>

<script>

    $(function () {
        var uploader = new plupload.Uploader({ //具体配置可见文档，当前设定了只支持doc,docx后缀名的，单次只能上传一个文件
            browse_button: "selectFile",
            file_data_name: "data",
            runtimes: "html5,flash,silverlight,html4",
            url: "${base}/management/internalMail/writeMail/uploadMultiFile.htm?attachConfigId=7",
            container: document.getElementById('pageFormContent'),
            filters: {
                mime_types: [{title: "word", extensions: "doc,docx"}],
                prevent_duplicates: true
            },
            multi_selection: false,
            flash_swf_url: "${base}/js/plupload-master/js/Moxie.swf"
        });

        uploader.init(); //初始化

        uploader.bind("QueueChanged", function (uploader) {
            //操作上传总队列，单次只允许上传一个文件
            if (uploader.files.length > 1) {
                uploader.splice(0, uploader.files.length - 1);
            }
            uploader.files[0].name?$("#showFile").val(uploader.files[0].name):$("#showFile").val("");
            uploader.start();//上传
            $("#shangchuans").hide();
            $("#zhongs").show();
        });

        uploader.bind("UploadProgress",function (uploader,file) {
            console.log(file.percent)
            //进度条
            $("#shangchuans").html('<span style="width:'+file.percent+'%;height: 10px;display: inline-block;background-color:#0E82D8;"></span>');
            $("#chuanzhis").html(file.percent+"%")
        });

        uploader.bind("FileUploaded", function (uploader,file,responseObject) {
            console.log(responseObject);
            var a =responseObject.response;
            var b=a.substring(1);
            var c= b.substring(0,b.length-2);
            document.getElementById('showFiles').value=c;
            $("#zhongs").hide();
            $("#shangchuans").show();
        });


       var uploaderPDF = new plupload.Uploader({ //具体配置可见文档，当前设定了只支持pdf后缀名的，单次只能上传一个文件
            browse_button: "selectFilePDF",
            file_data_name: "data",
            runtimes: "html5,flash,silverlight,html4",
            url: "${base}/management/internalMail/writeMail/uploadMultiFile.htm?attachConfigId=7",
            container: document.getElementById('pageFormContent'),
            filters: {
                mime_types: [{title: "pdf", extensions: "pdf"}],
                prevent_duplicates: true
            },
            multi_selection: false,
            flash_swf_url: "${base}/js/plupload-master/js/Moxie.swf"
        });

        uploaderPDF.init(); //初始化

        uploaderPDF.bind("QueueChanged", function (uploader) {
            //操作上传总队列，单次只允许上传一个文件
            if (uploader.files.length > 1) {
                uploader.splice(0, uploader.files.length - 1);
            }
            uploader.files[0].name?$("#showFilePDF").val(uploader.files[0].name):$("#showFilePDF").val("");
            uploader.start();
           /* $("#shangchuan").hide();
            $("#zhong").show();*/
        });
        uploaderPDF.bind("UploadProgress",function (uploader,file) {
            console.log(file.percent)
            $("#shangchuan").html('<span style="width:'+file.percent+'%;height: 10px;display: inline-block;background-color:#0E82D8;text-align: center"></span>');
            $("#chuanzhi").html(file.percent+"%")
        });

        uploaderPDF.bind("FileUploaded", function (uploader,file,responseObject) {
            console.log(responseObject);
            var a =responseObject.response;
            var b=a.substring(1);
            var c= b.substring(0,b.length-2);
            document.getElementById('showFilePDFs').value=c;
            $("#zhong").hide();
            $("#shangchuan").show();
        });


    })
</script>

后台方法

@RequestMapping("/uploadMultiFile")
    @ResponseBody
    public String uploadMultiFile(HttpServletRequest request,
                                  HttpServletResponse response) {
        //得到附件配置ID
        String attachConfigId=request.getParameter("attachConfigId");
        //System.out.println("开始上传,参数："+publicService.arrayMapToStringMap(request.getParameterMap()));
        if(attachConfigId==null) return "上传失败！原因为附件路径没有定义！";
        String responseStr = "";
        MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
        Map<String, MultipartFile> fileMap = multipartRequest.getFileMap();
        //通过参数配置表查询到附件要存放的路径,同时对附件的路径进行翻译
        String upPath=publicService.getFileSavePath(Integer.parseInt(attachConfigId),publicService.arrayMapToStringMap(request.getParameterMap()));
        //将存储路径传入list页面
        //翻译完毕
        // 文件保存路径
        String ctxPath = request.getSession().getServletContext().getRealPath(
                upPath);
        // 创建文件夹
        File file = new File( ctxPath);
        if (!file.exists()) {
            file.mkdirs();
        }
        String fileName = null;
        String fileSize=null;
        for (Map.Entry<String, MultipartFile> entity : fileMap.entrySet()) {
            // 上传文件
            MultipartFile mf = entity.getValue();
            fileName = mf.getOriginalFilename();
            fileSize=String.valueOf(mf.getSize());
            String fileExt = fileName.substring(fileName.lastIndexOf(".") + 1)
                    .toLowerCase();
            // 重命名文件
            String newFileName = (new Date()).getTime() + "."
                    + fileExt;
            System.out.println("上传路径："+ctxPath +"/"+ newFileName);
            File uploadFile = new File(ctxPath +"/"+ newFileName);

            try {
                FileCopyUtils.copy(mf.getBytes(), uploadFile);
                responseStr =  upPath+newFileName ;
            } catch (IOException e) {
                responseStr = "上传失败";
                e.printStackTrace();
            }
        }
        return responseStr;

        // return ajaxDoneSuccess("上传成功！");

    }

后台如果有正巧能用的可以参考一下，但是前段已经能够实现异步上传了！这里是通过节点信息获取内容进行解析！自己留着看看

小萌新！不喜勿喷