上传下载,使用js的Uploader一个页面两个上传按钮

最新推荐文章于 2025-11-27 04:24:38 发布

原创最新推荐文章于 2025-11-27 04:24:38 发布 · 771 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#其他 #java

该博客介绍如何在页面上使用JS实现两个独立的文件上传按钮，利用plupload库进行上传操作，并通过Java后端处理上传的文件。文章详细讲解了JS代码配置和事件绑定，以及Java的上传和下载接口实现。

jsp:

原代码上传：

上传

新代码上传：

上传

js:

//触发的id
var ids = new Array(“uploadBtn”,“uploadBtnTwo”);
$.each(ids,function(i,n){
var self = this.toString();
var uploader = new plupload.Uploader({ //实例化一个plupload上传对象
runtimes: ‘html5,silverlight,html4,flash’,
browse_button : self,
url : prefix+"/uploadFroOperation",
flash_swf_url : “/ajax/libs/plupload/Moxie.swf”,
silverlight_xap_url : “/ajax/libs/plupload/Moxie.xap”,
filters: {
max_file_size: ‘1gb’, //最大上传文件大小（格式100b, 10kb, 10mb, 1gb）
mime_types : [{ title : “图片文件”, extensions:“jpg,jpeg,gif,png,bmp” },
{title: “视频文件”, extensions: “mp4,mpeg4,3gp,wav,wma,wmv”},
{title: “文本文件”, extensions: “txt,pdf,doc,docx,xls,xlsx,ppt,pptx,ini”},
{title: “视频文件”, extensions: “zip,rar,gz,bz2,jar”},
{title: “音频文件”, extensions: “mp3,mid,wav,wma,avi”}
]
}//只允许上传图片文件
});
uploader.init(); //初始化
//绑定文件添加进队列事件
uploader.bind(‘FilesAdded’,function(uploader,files){
var flag = self.search(‘1’);// -1 表示没找到
uploader.start();
});
uploader.bind(‘Error’,function(up, err){
alert(err.message);//上传出错的时候触发
});
uploader.bind(“FileUploaded”, function(up, file, res){
if(self.search(“uploadBtn”)0 &&self.search(“uploadBtnTwo”) -1){
var json=res.response;
json=JSON.parse(json);

                    if(json.code!=0&&json.code!='0'){
                        $.modal.alertError(json.msg);
                    }
                    uploadCallbackONE(json.data);
                }else if(self.search("uploadBtn")==0 &&self.search("uploadBtnTwo")== 0){
                    var json=res.response;
                    json=JSON.parse(json);
            
                    if(json.code!=0&&json.code!='0'){
                        $.modal.alertError(json.msg);
                    }
                    uploadCallbackTWO(json.data);
                }
            })
    });

    function uploadCallbackONE(json){
        $("#oldCodeName").val(json.name);
        $("#oldCodeUrl").val(json.path);
    }
  
    function uploadCallbackTWO(json){
        $("#newCodeName").val(json.name);
        $("#newCodeUrl").val(json.path);
    }

JAVA：

    }catch (Exception e) {
        System.out.println("【错误信息】"+e);
        e.printStackTrace();
    }
    
}
/**
 * 下载请求
 * 
 * @param fileName 文件名称
 */
@GetMapping("/downloadFroNewOperation/{id}")
public void downloadFroNewOperation(@PathVariable("id") Long id, HttpServletResponse response, HttpServletRequest request)
{
    try
    {
        ProductOperation productOperation = productOperationService.selectProductOperationById(id);
        String newCodeUrl=productOperation.getNewCodeUrl();
        String newcodeName=productOperation.getNewCodeName();
        if(newCodeUrl!=null){
            String fileName =newCodeUrl;
            String[] split = fileName.split("/profile");
            //fileName= split[1].replaceAll("/","\\\\"); 
            fileName=split[1].toString();
            String realFileName = System.currentTimeMillis()+"_"+newcodeName;
            String filePath = Global.getProfile()+fileName;
            response.setCharacterEncoding("utf-8");
            response.setContentType("multipart/form-data");
            response.setHeader("Content-Disposition",
                    "attachment;fileName=" + FileUtils.setFileDownloadHeader(request, realFileName));
            FileUtils.writeBytes(filePath, response.getOutputStream());
        }else {
            throw new Exception(StringUtils.format("没有对应文件，不允许下载。 ", newCodeUrl));
        }
    }catch (Exception e) {
        System.out.println("【错误信息】"+e);
        e.printStackTrace();
    }
    
}jsp:

原代码上传：

上传

新代码上传：

上传

js:

//触发的id
   var ids = new Array(“uploadBtn”,“uploadBtnTwo”);
   $KaTeX parse error: Expected '}', got '&' at position 1582: \dotsuploadBtn")==0 &̲&self.search("u\dots$ .modal.alertError(json.msg);
   }
   uploadCallbackONE(json.data);
   }else if(self.search(“uploadBtn”)0 &&self.search(“uploadBtnTwo”) 0){
       var json=res.response;
   json=JSON.parse(json);

   if(json.code!=0&&json.code!=‘0’){
   $.modal.alertError(json.msg);
   }
   uploadCallbackTWO(json.data);
   }
   })
   });

   function uploadCallbackONE(json){
$("#oldCodeName").val(json.name);
$("#oldCodeUrl").val(json.path);
   }

   function uploadCallbackTWO(json){
$("#newCodeName").val(json.name);
$("#newCodeUrl").val(json.path);
   }

JAVA：

/**
* 上传资源请求
/
@PostMapping("/uploadFroOperation")
@ResponseBody
public AjaxResult uploadResource(MultipartFile file) throws Exception
{
try
{
// 上传并返回新文件名称
String path = FileUploadUtils.upload(Global.getUploadPath(), file);
Map map=new HashMap();
map.put(“path”,path);
map.put(“size”,file.getSize());
map.put(“name”,file.getOriginalFilename());
return AjaxResult.success(map);
}
catch (Exception e)
{
return AjaxResult.error(e.getMessage());
}
}
/*
* 下载请求
*
* @param fileName 文件名称
/
@GetMapping("/downloadFroOperation/{id}")
public void fileDownload(@PathVariable(“id”) Long id, HttpServletResponse response, HttpServletRequest request)
{
try
{
ProductOperation productOperation = productOperationService.selectProductOperationById(id);
String oldCodeUrl=productOperation.getOldCodeUrl();
String oldCodeName=productOperation.getOldCodeName();
if(oldCodeUrl!=null) {
       String fileName =oldCodeUrl;
       String[] split = fileName.split("/profile");
       //fileName= split[1].replaceAll("/","\\");
fileName=split[1].toString();
String realFileName = System.currentTimeMillis()+""+oldCodeName;
String filePath = Global.getProfile()+fileName;
response.setCharacterEncoding(“utf-8”);
response.setContentType(“multipart/form-data”);
response.setHeader(“Content-Disposition”,
“attachment;fileName=” + FileUtils.setFileDownloadHeader(request, realFileName));
FileUtils.writeBytes(filePath, response.getOutputStream());
}else {
   throw new Exception(StringUtils.format(“没有对应文件，不允许下载。 “, oldCodeUrl));
}

}catch (Exception e) {
   System.out.println(”【错误信息】”+e);
       e.printStackTrace();
       }

}
/*
* 下载请求
*
* @param fileName 文件名称
*/
@GetMapping("/downloadFroNewOperation/{id}")
public void downloadFroNewOperation(@PathVariable(“id”) Long id, HttpServletResponse response, HttpServletRequest request)
{
   try
   {
       ProductOperation productOperation = productOperationService.selectProductOperationById(id);
       String newCodeUrl=productOperation.getNewCodeUrl();
       String newcodeName=productOperation.getNewCodeName();
       if(newCodeUrl!=null){
           String fileName =newCodeUrl;
               String[] split = fileName.split("/profile");
               //fileName= split[1].replaceAll("/","\\");
               fileName=split[1].toString();
               String realFileName = System.currentTimeMillis()+""+newcodeName;
               String filePath = Global.getProfile()+fileName;
               response.setCharacterEncoding(“utf-8”);
               response.setContentType(“multipart/form-data”);
               response.setHeader(“Content-Disposition”,
                       “attachment;fileName=” + FileUtils.setFileDownloadHeader(request, realFileName));
               FileUtils.writeBytes(filePath, response.getOutputStream());
       }else {
           throw new Exception(StringUtils.format(“没有对应文件，不允许下载。 “, newCodeUrl));
       }
   }catch (Exception e) {
       System.out.println(”【错误信息】”+e);
       e.printStackTrace();
   }

}