最近有用到多图片上传的功能，但是不能有多少个图片就写多少个<input type=file>标签，于是在网上找了一个js展现图片的模板，自己改造之后实现了单个input上传多个图片的功能。
1.项目是基于springboot
快速搭建springboot：
http://start.spring.io/
项目名是studySpringBoot，如下图，如不想搭建，可以直接用我后面的百度云源代码
2.前台代码如下：
uploadImg.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>一个input实现多图片上传</title>
<script src="js/jquery.min.js"></script>
<script src="js/uploadImg.js"></script>
<style type="text/css"></style>
<link rel="stylesheet" type="text/css" href="css/uploadImg.css">
</head>
<body>
<form action="" id="upBox">
小区名字：<input name="areaName">
<div id="inputBox">
<input type="file" name="file" title="请选择图片" id="file" multiple="multiple" accept="image/png,image/jpg,image/gif,image/JPEG"/>选择图片
</div>
<div id="imgBox">
</div>
<button id="btn">上传</button>
</form>
</body>
<script type="text/javascript">
imgUpload({
inputId:'file', //input框id
imgBox:'imgBox', //图片容器id
buttonId:'btn', //提交按钮id
upUrl:'/testController/uploadImg', //提交地址
data:'file', //参数名
num:"10"//最多上传图片个数
})
</script>
</html>
var imgSrc = []; //存放图片路径
var imgFile = []; //存放文件流
var imgName = []; //存放图片名字
//选择图片的操作
function imgUpload(obj) {
var oInput = '#' + obj.inputId;
var imgBox = '#' + obj.imgBox;
var btn = '#' + obj.buttonId;
//用on是因为它可以动态的绑定事件
$(oInput).on("change", function() {
//获取type=file的input
var fileImg = $(oInput)[0];
//得到所有的图片列表
var fileList = fileImg.files;
for(var i = 0; i < fileList.length; i++) {
//得到每个图片的路径
var imgSrcI = getObjectURL(fileList[i]);
//向文件名的数组末尾添加此文件名
imgName.push(fileList[i].name);
//向路径的数组末尾添加路径
imgSrc.push(imgSrcI);
//在文件流数组的末尾添加文件
imgFile.push(fileList[i]);
}
//将图片展示出去
addNewContent(imgBox);
})
$(btn).on('click', function() {
if(!limitNum(obj.num)){
alert("最多只能上传"+obj.num+"张照片!");
return false;
}
//用FormData对象上传
var fd = new FormData($('#upBox')[0]);
//由于fd对象中已经包含<input type='file'>的input标签，如果不删除，就会造成重复上传
fd.delete("file");
//将文件流循环添加到FormData对象中
for(var i=0;i<imgFile.length;i++){
fd.append(obj.data,imgFile[i]);
}
//上传所有的图片
submitPicture(obj.upUrl, fd);
})
}
//图片展示
function addNewContent(obj) {
$(imgBox).html("");
for(var a = 0; a < imgSrc.length; a++) {
var oldBox = $(obj).html();
$(obj).html(oldBox + '<div class="imgContainer"><img title=' + imgName[a] + ' alt=' + imgName[a] + ' src=' + imgSrc[a] + ' οnclick="imgDisplay(this)"><p οnclick="removeImg(this,' + a + ')" class="imgDelete">删除</p></div>');
}
}
//删除
function removeImg(obj, index) {
//向数组中删除元素
imgSrc.splice(index, 1);
imgFile.splice(index, 1);
imgName.splice(index, 1);
var boxId = "#" + $(obj).parent('.imgContainer').parent().attr("id");
addNewContent(boxId);
}
//限制图片个数
function limitNum(num){
if(!num){
return true;
}else if(imgFile.length>num){
return false;
}else{
return true;
}
}
//上传(将文件流数组传到后台)
function submitPicture(url,data) {
for (var p of data) {
console.log(p);
}
if(url&&data){
$.ajax({
type: "post",
url: url,
async: true,
data: data,
//下面这两个要写成false，要不然上传不了。
processData: false,
contentType: false,
success: function(dat) {
console.log(dat);
}
});
}else{
alert('数据格式不正确!');
}
}
//当鼠标移到图片上时，显示x删除
function imgDisplay(obj) {
var src = $(obj).attr("src");
var imgHtml = '<div style="width: 100%;height: 100vh;overflow: auto;background: rgba(0,0,0,0.5);text-align: center;position: fixed;top: 0;left: 0;z-index: 1000;"><img src=' + src + ' style="margin-top: 100px;width: 70%;margin-bottom: 100px;"/><p style="font-size: 50px;position: fixed;top: 30px;right: 30px;color: white;cursor: pointer;" οnclick="closePicture(this)">×</p></div>'
$('body').append(imgHtml);
}
//关闭
function closePicture(obj) {
$(obj).parent("div").remove();
}
//图片预览路径
function getObjectURL(file) {
var url = null;
if(window.createObjectURL != undefined) { // basic
url = window.createObjectURL(file);
} else if(window.URL != undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file);
} else if(window.webkitURL != undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file);
}
return url;
}3.在src/main/java下建立一个包controller,包下面有两个类，一个是用来启动主程序，一个用来上传图片。由于功能简单，我这里就没写service，用到项目里面的时候要尽可能把业务处理写到service中去。
SampleController
package controller;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.EnableAutoConfiguration;
import org.springframework.context.annotation.ComponentScan;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
@Controller
@EnableAutoConfiguration
@ComponentScan("controller")
public class SampleController {
@RequestMapping("/test")
@ResponseBody
String home() {
return "Hello World!";
}
public static void main(String[] args) throws Exception {
SpringApplication.run(SampleController.class, args);
}
}
UploadImageController
package controller;
import java.io.File;
import java.io.FileOutputStream;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
@Controller
@RequestMapping("/testController")
public class UploadImage {
@RequestMapping("/uploadImg")
@ResponseBody
public void uploadImg(MultipartFile file[], String areaName) throws Exception {
System.out.println("得到的areaName:"+areaName);
// 设置上传的路径是D盘下的picture
String imgPath = "D:/picture/";
for (MultipartFile f : file) {
// 图片的名字用毫秒数+图片原来的名字拼接
System.out.println(f.getSize());
System.out.println(f.getBytes());
String imgName = System.currentTimeMillis() + f.getOriginalFilename();
//上传文件
uploadFileUtil(f.getBytes(), imgPath, imgName);
}
}
/**
* 上传文件的方法
* @param file：文件的字节
* @param imgPath：文件的路径
* @param imgName：文件的名字
* @throws Exception
*/
public void uploadFileUtil(byte[] file, String imgPath, String imgName) throws Exception {
File targetFile = new File(imgPath);
if (!targetFile.exists()) {
targetFile.mkdirs();
}
FileOutputStream out = new FileOutputStream(imgPath + imgName);
out.write(file);
out.flush();
out.close();
}
}
点击上传即可把图片上传到D盘下的picture文件夹下。
源代码百度云链接：http://pan.baidu.com/s/1qYl0uIS 密码：r5gu
扫一扫
21万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
