批量上传图片
<style>
.add_div {
width: 85%;
padding-left: 50px;
}
.file-list {
height: 125px;
display: none;
list-style-type: none;
}
.file-list img {
max-width: 70px;
vertical-align: middle;
}
.file-list .file-item {
margin-bottom: 10px;
float: left;
margin-left: 20px;
}
.file-list .file-item .file-del {
display: block;
margin-left: 20px;
margin-top: 5px;
cursor: pointer;
}
</style>
<div id="addComment" style="display:none;">
<iframe width="0" height="0" id="frm_add_comment" src="" name="frm_add_comment" style="display:hidden;"></iframe>
<form method="post" action="${pageContext.request.contextPath}/news/informationAction.do?action=1044" name="addCommentForm" id="addCommentForm" target="frm_add_comment">
<input type="hidden" id="commentContentId" name="contentId">
<input type="hidden" readonly="readonly" >
<div id="addUser" style="float:right;margin-right:10px;width: 200px;text-align: right;">
</div>
<input type="hidden" readonly="readonly" id="refid" name="refid" >
<table id="commentTable" style="padding-left: 10px;width: 98%" >
</table>
<div style="padding: 0 10px;position: absolute;bottom: 10px;width: 95%;background-color: white;">
<div style="float: left;display: flex;padding-bottom: 5px;">
<div style="width: 55px;">File:</div>
<div><input type="file" name="files" id="choose-file" multiple="multiple"></div>
</div>
<div class="add_div" style="float: left;">
<ul id="fileImgs" class="file-list " style="padding-left: 0px;">
</ul>
</div>
<div style="display: flex;float: left;">
<div >
写评论:
</div>
<div style="padding-left: 5px;"><textarea name="content" id="content" style="width: 800px;" class="news-textarea" placeholder="输入评论…………"></textarea></div>
<div style="float: left;margin-top: 70px;padding-left: 10px;"><input type="button" onclick="commentSub()" value="提交评论"></div>
</div>
<div style="clear: both;"></div>
</div>
</form>
</div>
<script>
图片上传//
//声明变量
var $button = $('#upload'),
//选择文件按钮
$file = $("#choose-file"),
//回显的列表
$list = $('.file-list'),
//选择要上传的所有文件
fileList = [];
//当前选择上传的文件
var curFile;
// 选择按钮change事件，实例化fileReader,调它的readAsDataURL并把原生File对象传给它，
// 监听它的onload事件，load完读取的结果就在它的result属性里了。它是一个base64格式的，可直接赋值给一个img的src.
$file.on('change', function (e) {
//上传过图片后再次上传时限值数量
var numold = $('li').length;
/* if(numold >= 9){
layer.alert('最多上传9张图片');
return;
} */
//限制单次批量上传的数量
var num = e.target.files.length;
var numall = numold + num;
/* if(num >9 ){
layer.alert('最多上传9张图片');
return;
}else if(numall > 9){
layer.alert('最多上传9张图片');
return;
} */
//原生的文件对象，相当于$file.get(0).files;//files[0]为第一张图片的信息;
curFile = this.files;
//curFile = $file.get(0).files;
//console.log(curFile);
//将FileList对象变成数组
fileList = fileList.concat(Array.from(curFile));
//console.log(fileList);
for (var i = 0, len = curFile.length; i < len; i++) {
// reviewFile(curFile[i])
addFile(curFile[i]);
}
$('.file-list').fadeIn(2500);
})
function reviewFile(curFile) {
//实例化fileReader,
var fd = new FileReader();
//获取当前选择文件的类型
var fileType = file.type;
//调它的readAsDataURL并把原生File对象传给它，
fd.readAsDataURL(file);//base64
//监听它的onload事件，load完读取的结果就在它的result属性里了
fd.onload = function () {
if (/^image\/[jpeg|png|jpg|gif]/.test(fileType)) {
$list.append('<li style="border:solid red px; margin:5px 5px;" class="file-item"><img src="' + this.result + '" alt="" height="70"><span class="file-del">删除</span></li>').children(':last').hide().fadeIn(2500);
} else {
$list.append('<li class="file-item"><span class="file-name">' + file.name + '</span><span class="file-del">删除</span></li>')
}
}
}
//点击删除按钮事件：
$(".file-list").on('click', '.file-del', function () {
let $parent = $(this).parent();
console.log($parent);
let index = $parent.index();
fileList.splice(index, 1);
$parent.fadeOut(850, function () {
$parent.remove()
});
//$parent.remove()
});
function addFile(file){
var formData = new FormData();
formData.append('upfile[]', file);
$.ajax({
url: '${pageContext.request.contextPath}/business/businessInfoCoordinate.do?action=addBusinessInfo2',
type: 'post',
data: formData,
dataType: 'json',
processData: false,
contentType: false,
success: function (data) {
if (data.status == '100') {
var file=data.files;
if(file!=null&&file.length>0){
for (var i = 0; i < file.length; i++) {
if (/jpeg|png|jpg|gif/.test(file[i].fileType)) {
$list.append('<li style="border:solid red px; margin:5px 5px;" class="file-item"><img src="<%=GlobalContainer.getInstance().getWebFilePath()%>' + file[i].filePath + '" alt="" height="70"><span class="file-del">删除</span><input type="hidden" name="albumPath" value="' + file[i].filePath + '"></li>').children(':last').hide().fadeIn(2500);
} else {
$list.append('<li class="file-item"><span class="file-name">' + file[i].fileName + '</span><span class="file-del">删除</span><input type="hidden" name="albumPath" value="' + file[i].filePath + '"></li>')
}
}
}
} else if (data.status == '100') {
alert("上传失败");
}
}
})
}
//点击上传按钮事件：
$button.on('click', function () {
/* if(fileList.length > 9){
layer.alert('最多允许上传9张图片');
return;
} else { */
var formData = new FormData();
for (var i = 0, len = fileList.length; i < len; i++) {
//console.log(fileList[i]);
formData.append('upfile[]', fileList[i]);
}
// formData.append('catgory', catgory);
// formData.append('price', price);
// formData.append('desc', desc);
// formData.append('stock', stock);
// formData.append('status', status);
//console.log(formData);
$.ajax({
url: '${pageContext.request.contextPath}/business/businessInfoCoordinate.do?action=addBusinessInfo2',
type: 'post',
data: formData,
dataType: 'json',
processData: false,
contentType: false,
success: function (data) {
if (data.status == '1') {
layer.msg(data.content, {icon: 6});
} else if (data.status == '2') {
layer.msg(data.content, {icon: 1});
}
}
})
/* } */
})
</script>
java
public ActionForward addBusinessInfo2(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response) {
String rootPath = GlobalContainer.getInstance().getSaveFilePath();
String imgPath="/business/";
String path=rootPath+imgPath;
List<FileItem> uploadItemList = new ArrayList<FileItem>();
JSONObject jsonObj = new JSONObject();
JSONArray files=new JSONArray();
jsonObj.put("status","100");
boolean isMultipart = ServletFileUpload.isMultipartContent(request);
if (!isMultipart) {
System.out.println("不是multipart表单");
jsonObj.put("status","200");
} else {
DiskFileItemFactory factory = new DiskFileItemFactory();
ServletFileUpload upload = new ServletFileUpload(factory);
upload.setHeaderEncoding("UTF-8");
factory.setRepository(new File(System.getProperty("java.io.tmpdir"))); 获取临时目录
try {
List<FileItem> list = (List<FileItem>)upload.parseRequest(request);
for(FileItem item : list){
if(!item.isFormField()){
JSONObject obj=new JSONObject();
String name = item.getName();
String fileName =getFileName(name);
obj.put("fileType", getFileType(name));
obj.put("fileName", "");
if(name!=null&&!"".equals(name)) {
obj.put("fileName", name.substring(0, name.indexOf(".")));
}
String newName = fileName;
File file =new File(path);
if(!file.exists() && !file.isDirectory()){
file.mkdirs();
}
OutputStream out = new FileOutputStream(new File(path,newName));
InputStream in1 = item.getInputStream() ;
int length = 0 ;
byte [] buf = new byte[1024] ;
while( (length = in1.read(buf) ) != -1){
out.write(buf, 0, length);
}
in1.close();
out.close();
/**将上传处理后的数据返回**/
obj.put("filePath", imgPath+newName);
files.add(obj);
}
}
}catch (Exception e) {
// TODO: handle exception
}
}
jsonObj.put("files",files);
try{
response.setCharacterEncoding("utf-8");
response.getWriter().print(jsonObj.toString());
}catch(Exception e){
e.printStackTrace();
}
return null;
}
//文件名称生成
private String getFileName(String sFileName) {
String name = "";
if (!sFileName.equals("")) {
int iLastIndexOf = sFileName.lastIndexOf(".");
sFileName = System.currentTimeMillis() +
sFileName.substring(iLastIndexOf, sFileName.length());
name = sFileName;
}
return name;
}
//文件名称生成
private String getFileType(String sFileName) {
String name = "";
if (!sFileName.equals("")) {
int iLastIndexOf = sFileName.lastIndexOf(".")+1;
sFileName = sFileName.substring(iLastIndexOf, sFileName.length());
name = sFileName;
}
return name;
}
扫一扫
2093
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
