文件上传

最新推荐文章于 2023-07-10 19:58:07 发布

长空殿

最新推荐文章于 2023-07-10 19:58:07 发布

阅读量224

点赞数

分类专栏：开发技术文章标签：文件上传

本文链接：https://blog.csdn.net/w6025110/article/details/80893741

版权

开发技术专栏收录该内容

26 篇文章 2 订阅

订阅专栏

最近测试功能需要涉及文件上传，头次玩，这里记录一下实现方式，后台接口不多说直接上代码如下：

@RequestMapping(value = "/index/upload",method = RequestMethod.POST)
    @ResponseBody
    public String handlerFileUpLoad(@RequestParam(value = "file",required=false)MultipartFile file,HttpServletRequest request){
        try{
            System.out.println("上传文件");
            byte[] bytes = file.getBytes();
            File saveFile = new File("E://" + file.getOriginalFilename());
            if (!saveFile.getParentFile().exists()) {
                saveFile.getParentFile().mkdirs();
            }
            try {
                BufferedOutputStream out = new BufferedOutputStream(new FileOutputStream(saveFile));
                out.write(file.getBytes());
                out.flush();
                out.close();
                return saveFile.getName() + " 上传成功";
            } catch (FileNotFoundException e) {
                e.printStackTrace();
                return "上传失败," + e.getMessage();
            } catch (IOException e) {
                e.printStackTrace();
                return "上传失败," + e.getMessage();
            }
            }catch (Exception ex){
            System.out.println("文件上传出现异常：" + ex.getMessage());
        }
        return "error";
    }

required=false 故名思意非必填内容

需要注意的是前台调用，前台一般文件上传有两种方式：

1.基于form表单直接上传,

2.使用ajax上传

这两种方式的核心原理实际上是一样的。具体请参考：

点击打开链接

分别给出两种实现方式：

以下代码实现我也是从别人家粘贴的，具体谁家我忘了~~~但是测试可以使用：

1.form表单方案

html页面：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" class="sui-componentWarp">
<head>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="dataUpload.js" type="text/javascript"></script>
</head>
<body>
<form id="upload" enctype="multipart/form-data" method="post"> 
 <input type="file" name="file" id="pic"/> 
 <input type="button" value="提交" id="uploadAirport"/> 
 <span class="showUrl"></span> 
 <img src="" class="showPic" alt=""> 
</form>
</body> 
</html>

js：

filename：dataUpload.js

代码：

$(function(){
    //上传按钮
    $("#uploadAirport").click(function(){
        var file = $("#pic").val();
        if(file.length!=0){
            var formdata=document.getElementById("upload");
            formdata.action="http://127.0.0.1:8084/upload";
            formdata.submit();
        }else{
            layer.alert("请选择要上传的文件！");
            return;
        }
    });
    
    var result = $("#result").val();
    if(result == "success"){
        layer.alert("上传成功！");
        $("#result").val("");
        return;
    }else if(result == "failure"){
        layer.alert("上传失败！");
        $("#result").val("");
        return;
    }else{
        return;
    }


});
}

2.基于ajax的实现

页面：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" class="sui-componentWarp">
<head>
 <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="fileupload.js" type="text/javascript"></script>

</head>
<body>
<form id="upload" enctype="multipart/form-data" method="post"> 
 <input type="file" name="file" id="pic"/> 
 <input type="button" value="上传" οnclick="uploadPic()"/>
 <span class="showUrl"></span>
 <img src="" class="showPic" alt=""/>
</form>
</body>
</html>

js:

jsfilename:fileupload.js

function uploadPic() { 
  var form = document.getElementById('upload'), 
    formData = new FormData(form);
 console.time(1);
 var url = window.location.pathname + "/upload";
// var url ="http://127.0.0.1:8084/index/upload";
  $.ajax({ 
   url:url,
   type:"post",
   data:formData, 
   processData:false, 
   contentType:false, 
   cache: false,
   async:true,
   // jsonp:"cb",
   // datatype:"jsonp"

   success:function(data,res){ 
    if(res){ 
     alert("上传成功！");
    }
    console.timeEnd(1);
    console.log(res); 
    $("#pic").val(""); 
    $(".showUrl").html(res);
   }, 
   error:function(err){ 
    alert("网络连接失败,稍后重试",err);
   } 

  }) 
  
 }
 function cb(ssss){
	 alert("1111");
 }

这里说一下跨域问题，由于我第一次使用时是直接浏览器打开html的文件。产生了跨域的问题，因此测试请尽量将这玩意放到项目中结合测试，或者使用非浏览器方式测试接口。

长空殿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
文件上传

最近测试功能需要涉及文件上传，头次玩，这里记录一下实现方式，后台接口不多说直接上代码如下：@RequestMapping(value = "/index/upload",method = RequestMethod.POST) @ResponseBody public String handlerFileUpLoad(@RequestParam(value = "file",req...
复制链接

扫一扫