图片上传（支持多张）
html端主要代码
// 主要代码
<form id="iForm" enctype="multipart/form-data">
<input type="file" multiple="multiple" id="file" name="fileupload" onchange="uploadHeadImg_pic(this)">
</form>
<script type="text/javascript" src="js/ajaxfileupload.js"></script>
<script type="text/javascript" src="js/pic_upload.js"></script>
所引用的js：ajaxfileupload.js
// ajaxfileupload.js
jQuery.extend({
//2013-06-19 Etoak_james 增加函数handleError 解决jQuery.handleError is not a function异常
handleError: function( s, xhr, status, e ) {
// If a local callback was specified, fire it
if ( s.error ) {
s.error.call( s.context || s, xhr, status, e );
}
// Fire the global callback
if ( s.global ) {
(s.context ? jQuery(s.context) : jQuery.event).trigger( "ajaxError", [xhr, s, e] );
}
},
createUploadIframe: function(id, uri)
{
//create frame
var frameId = 'jUploadFrame' + id;
if(window.ActiveXObject) {
var io = document.createElement('<iframe id="' + frameId + '" name="' + frameId + '" />');
if(typeof uri== 'boolean'){
io.src = 'javascript:false';
}
else if(typeof uri== 'string'){
io.src = uri;
}
}
else {
var io = document.createElement('iframe');
io.id = frameId;
io.name = frameId;
}
io.style.position = 'absolute';
io.style.top = '-1000px';
io.style.left = '-1000px';
document.body.appendChild(io);
return io;
},
createUploadForm: function(id, fileElementId)
{
//create form
var formId = 'jUploadForm' + id;
var fileId = 'jUploadFile' + id;
var form = $('<form action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>');
var oldElement = $('#' + fileElementId);
var newElement = $(oldElement).clone();
$(oldElement).attr('id', fileId);
$(oldElement).before(newElement);
$(oldElement).appendTo(form);
$(form).css('position', 'absolute');
$(form).css('top', '-1200px');
$(form).css('left', '-1200px');
$(form).appendTo('body');
return form;
},
ajaxFileUpload: function(s) {
// TODO introduce global settings, allowing the client to modify them for all requests, not only timeout
s = jQuery.extend({}, jQuery.ajaxSettings, s);
var id = new Date().getTime();
var form = jQuery.createUploadForm(id, s.fileElementId);
var io = jQuery.createUploadIframe(id, s.secureuri);
var frameId = 'jUploadFrame' + id;
var formId = 'jUploadForm' + id;
// Watch for a new set of requests
if ( s.global && ! jQuery.active++ )
{
jQuery.event.trigger( "ajaxStart" );
}
var requestDone = false;
// Create the request object
var xml = {};
if ( s.global )
jQuery.event.trigger("ajaxSend", [xml, s]);
// Wait for a response to come back
var uploadCallback = function(isTimeout)
{
var io = document.getElementById(frameId);
try
{
if(io.contentWindow)
{
xml.responseText = io.contentWindow.document.body?io.contentWindow.document.body.innerHTML:null;
xml.responseXML = io.contentWindow.document.XMLDocument?io.contentWindow.document.XMLDocument:io.contentWindow.document;
}else if(io.contentDocument)
{
xml.responseText = io.contentDocument.document.body?io.contentDocument.document.body.innerHTML:null;
xml.responseXML = io.contentDocument.document.XMLDocument?io.contentDocument.document.XMLDocument:io.contentDocument.document;
}
}catch(e)
{
jQuery.handleError(s, xml, null, e);
}
if ( xml || isTimeout == "timeout")
{
requestDone = true;
var status;
try {
status = isTimeout != "timeout" ? "success" : "error";
// Make sure that the request was successful or notmodified
if ( status != "error" )
{
// process the data (runs the xml through httpData regardless of callback)
var data = jQuery.uploadHttpData( xml, s.dataType );
// If a local callback was specified, fire it and pass it the data
if ( s.success )
s.success( data, status );
// Fire the global callback
if( s.global )
jQuery.event.trigger( "ajaxSuccess", [xml, s] );
} else
jQuery.handleError(s, xml, status);
} catch(e)
{
status = "error";
jQuery.handleError(s, xml, status, e);
}
// The request was completed
if( s.global )
jQuery.event.trigger( "ajaxComplete", [xml, s] );
// Handle the global AJAX counter
if ( s.global && ! --jQuery.active )
jQuery.event.trigger( "ajaxStop" );
// Process result
if ( s.complete )
s.complete(xml, status);
jQuery(io).unbind();
setTimeout(function()
{ try
{
$(io).remove();
$(form).remove();
} catch(e)
{
jQuery.handleError(s, xml, null, e);
}
}, 100)
xml = null
}
}
// Timeout checker
if ( s.timeout > 0 )
{
setTimeout(function(){
// Check to see if the request is still happening
if( !requestDone ) uploadCallback( "timeout" );
}, s.timeout);
}
try
{
var form = $('#' + formId);
$(form).attr('action', s.url);
$(form).attr('method', 'POST');
$(form).attr('target', frameId);
if(form.encoding)
{
form.encoding = 'multipart/form-data';
}
else
{
form.enctype = 'multipart/form-data';
}
$(form).submit();
} catch(e)
{
jQuery.handleError(s, xml, null, e);
}
if(window.attachEvent){
document.getElementById(frameId).attachEvent('onload', uploadCallback);
}
else{
document.getElementById(frameId).addEventListener('load', uploadCallback, false);
}
return {abort: function () {
}};
},
uploadHttpData: function( r, type ) {
var data = !type;
data = type == "xml" || data ? r.responseXML : r.responseText;
// If the type is "script", eval it in global context
if ( type == "script" ){
jQuery.globalEval( data );
}
// Get the JavaScript object, if JSON is used.
if ( type == "json" ){
// alert(data)
eval( "data = " + data );//
//经修改 原因：图片上传成功ajax请求仍会报错
var data = r.responseText;
var rx = new RegExp("<pre.*?>(.*?)</pre>","i");
var am = rx.exec(data);
//this is the desired data extracted
var data = (am) ? am[1] : ""; //the only submatch or empty
// alert(data)
eval( "data = " + data );
}
if ( type == "html" ){
jQuery("<div>").html(data).evalScripts();
}
return data;
}
});
所引用的js：pic_upload.js
// pic_upload.js
function uploadHeadImg_pic(obj){
//批量上传图片
layer.load();//添加进度条
$.ajaxFileUpload({
url:"/.../uploadManypic.json?query="+ +new Date().getTime(),//需要链接到服务器地址
secureuri:false,
fileElementId:"file",//文件选择框的id属性 ,//文件选择框的id属性
dataType: 'json', //json
contentType: false, //不可缺
processData: false, //不可缺
success: function (data){
layer.closeAll('loading'); //关闭进度条
//图片信息list集合
//alert("个数"+data.list.length)
},
error:function(error){
layer.closeAll('loading'); //关闭进度条
lalert('网络原因操作失败！','error');
}
});
}
后端java代码：
// uploadManypic.json
@RequestMapping("/uploadManypic.json")
public @ResponseBody JSONMap<String,Object> UploadManypic( @RequestParam(value="file",required=false)MultipartFile[] file,
HttpServletRequest request,HttpServletResponse response, HttpSession session)
throws IOException {
JSONMap<String,Object> model = new JSONMap<String,Object>();
try{
File targetFile=null;
String msg="";//返回存储路径
int code=1;
ArrayList<Upload> list = new ArrayList<Upload>();
if (file!=null && file.length>0) {
for (int i = 0; i < file.length; i++) {
String fileName=file[i].getOriginalFilename();//获取文件名加后缀
if(fileName!=null&&fileName!=""){
//上下文项目名
String projectName="";
try{
projectName = request.getServletContext().getContextPath().substring(1);
}catch(Exception e){
projectName="ROOT";
}
//上传文件夹名
String floderName = "Upload/image";
//首字母大写
floderName = projectName + floderName.substring(0,1).toUpperCase() + floderName.substring(1) + "/";
//文件保存目录路径
String savePath = request.getServletContext().getRealPath("/").replace(projectName,"");
savePath = savePath + floderName;
//文件保存目录URL
//String saveUrl = request.getContextPath().replace(projectName,"");
String saveUrl = floderName;
//检查/创建根目录
File uploadDir = new File(savePath);
if(!uploadDir.exists()){
uploadDir.mkdirs();
}
SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd");
String ymd = sdf.format(new Date());
savePath += ymd + "/";
saveUrl += ymd + "/";
String returnUrl = saveUrl;//存储路径
String path =savePath; //文件存储位置
String fileF = fileName.substring(fileName.lastIndexOf("."), fileName.length());//文件后缀
String name=fileName;
fileName=System.currentTimeMillis()+fileF;//新的文件名
//先判断文件是否存在
// String fileAdd = ymd;
File file1 =new File(path);
//如果文件夹不存在则创建
if(!file1 .exists() && !file1 .isDirectory()){
file1 .mkdir();
}
targetFile = new File(file1, fileName);
file[i].transferTo(targetFile);
msg=returnUrl+fileName;
Upload upload = new Upload();
upload.setFilename(name);//真实文件名
upload.setFilepath(msg);//文件路径
list.add(upload);
}
}
model.put("list", list);
}
model.put(SysConstant.OP_FLAG, true);
model.put(SysConstant.OP_MESSAGE, SysConstant.SUCCESS);
return model;
} catch (Exception e) {
e.printStackTrace();
model.put(SysConstant.OP_FLAG, false);
model.put(SysConstant.OP_MESSAGE, SysConstant.Exception);
return model;
}
}
相关的实体类：
package com.repast.core.uiview;
public class Upload {
/**
* 文件名
* */
private String filename;
/**
* 相对路径
* */
private String filepath;
/**
* 上传日期
* */
private String uploaddate;
/**
* 服务器端文件名字
* */
private String servername;
/**
* 真实路径
* */
private String fileRealpath;
/**
* 文件大小（KB）
*/
private String filesize;
public String getFileRealpath() {
return fileRealpath;
}
public void setFileRealpath(String fileRealpath) {
this.fileRealpath = fileRealpath;
}
public String getFilename() {
return filename;
}
public void setFilename(String filename) {
this.filename = filename;
}
public String getFilepath() {
return filepath;
}
public void setFilepath(String filepath) {
this.filepath = filepath;
}
public String getUploaddate() {
return uploaddate;
}
public void setUploaddate(String uploaddate) {
this.uploaddate = uploaddate;
}
public String getServername() {
return servername;
}
public void setServername(String servername) {
this.servername = servername;
}
public String getFilesize() {
return filesize;
}
public void setFilesize(String filesize) {
this.filesize = filesize;
}
}
完
本文地址：https://blog.csdn.net/weixin_44460462/article/details/109179290
![2022-11-08：以下go语言代码输出什么？A：2；B：编译错误；C：运行 panic。 package main import “fmt“ func main() { a := []int](https://www.kunjuke.com/file/css/thumb/10.jpg/280-180.jpg)
