当前位置：网站首页>js上传文件的方式

js上传文件的方式

2022-07-28 05:30:00 【▀】

一 . 平台环境

win10 IDEA JDK8 springboot

二 . 上传文件

方式一 FormData

1.WebConfig.java (和Application.java同一目录下)

作用 将本地路径 D:\\upload\xxxxxxx 映射成为 http://127.0.0.1:8080/upload/xxxxxxxx



import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;

@Configuration
public class WebConfig extends WebMvcConfigurerAdapter{

	@Override
	public void addResourceHandlers(ResourceHandlerRegistry registry) {
		registry.addResourceHandler("/upload/**").addResourceLocations("file:D:\\upload\\");
	}
}

2. 定义方法在 serviceimpl（/com/xxxxx/service）类中

@Override
	public HigherResponse<String> addOneImage(HttpSession session, Product product, MultipartFile file) {
	
		// 判断文件是否是图片格式
		String originalFilename = file.getOriginalFilename();
		if(!originalFilename.endsWith(".jpg") && !originalFilename.endsWith(".png")) {
			return HigherResponse.getFailedRespon("图片格式不正确");
		}

		String[] imgs = originalFilename.split("\\.");
		// 生成主图的名字  图片的后缀
		UUID uid = UUID.randomUUID();
		String mainImage = uid+"."+imgs[1];
		product.setMainImage(mainImage);
		// 往数据库添加商品信息
		int addOneProduct = productDao.addOneProduct(product);
		
		if(addOneProduct == 0) {
			return HigherResponse.getFailedRespon("上传图片失败");
		}
		
		
		try {
			file.transferTo(new File("D:\\upload\\"+mainImage));
		} catch (IllegalStateException e) {
			return HigherResponse.getFailedRespon("上传图片失败");
		} catch (IOException e) {
			return HigherResponse.getFailedRespon("上传图片失败");
		}
		return HigherResponse.getSuccessRespon("上传成功");
	}

3.前端页面（参考于 https://www.cnblogs.com/chanyuli/p/11761421.html）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>

</head>
<body>
<input type="file" name="file" id="exampleimg">
<button id="b1">提交</button>
<img  id="im"/>

<script>


    $('#b1').click(function () {
        // 1.先生成一个formdata对象
        var myFormData = new FormData();
        // 2.朝对象中添加普通的键值
        // myFormData.append('username',$("#t1").val());
        // myFormData.append('password',$("#t2").val());
        // 3.朝对象中添加文件数据
        // 1.先通过jquery查找到该标签
        // 2.将jquery对象转换成原生的js对象
        // 3.利用原生js对象的方法 直接获取文件内容
        myFormData.append('file',$('#exampleimg')[0].files[0]);
        $.ajax({
            url:'/manage/order/get_file.do',
            type:'post',
            data:myFormData,  // 直接丢对象
            // ajax传文件 一定要指定两个关键性的参数
            contentType:false,  // 不用任何编码 因为formdata对象自带编码 django能够识别该对象
            processData:false,  // 告诉浏览器不要处理我的数据 直接发就行
            success:function (data) {
                alert(data)
            }
        })
    })




</script>

</body>

</html>

4 效果

方式二将图片转为base64然后使用json传送（类似于发送字符串）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>

</head>
<body>
<input type="file" name="file" id="exampleimg">
<button id="b1">提交</button>
<img  id="im" style="width: 300px;height: 100%"/>

<script>


    var baseurl = "";
    document.getElementById('exampleimg').addEventListener("change",function(){
        var target =  document.getElementById("exampleimg").files[0];
        var fileReader = new FileReader();
        fileReader.readAsDataURL(target);
        fileReader.onload = function(ex){
            baseurl =  ex.target.result;
            document.getElementById("im").setAttribute("src",baseurl);
        };

    })

    document.getElementById("b1").addEventListener("click",function (ev) {
        window.console.log(typeof baseurl);
        $.ajax({
            url:'/manage/order/get_file02.do', //修改url
            type:'post',   
            dataType:"json",
            data:{
                file:baseurl
            },  // 直接丢对象
            // ajax传文件 一定要指定两个关键性的参数

            success:function (data) {
                alert(data)
            }
        })
    })



</script>

</body>

</html>

将得到的base64编码转换成图片