本次开发采用uploader插件 需要在前台引入 使用该插件的 Uploader.swf文件（用于使用时js指向）
在wingsUploader.js 中对uploader插件进行设置
(function($) { //
// 设置属性
var uploader;
var ratio = window.devicePixelRatio || 1; //用于缩略图
// var thumbnailWidth = 50 * ratio; //缩略图的宽
// var thumbnailHeight = 50 * ratio; //缩略图的高
/**
* 构造函数
*/
$.fn.wingsUploader = function(options) {
// 设置组件参数
var opts = $.extend({}, $.fn.wingsUploader.defaults, options);
opts.pick = "#" + this[0].id;
successFun = opts.successfun;
errorFun = opts.errorFun;
// 初始化Web Uploader
uploader = WebUploader.create(opts);
// 创建文件显示位置
// 当有文件被添加进队列的时候
this.pictureShow = function(id){
uploader
.on(
'fileQueued',
function(file) {
var $li = $(
'<div id="' + file.id + '" class="file-item thumbnail">' +
'<img>' +
// '<div class="info">' + file.name
// + '</div>' +
'</div>'
),
$img = $li.find('img');//创建缩略图
// $list为容器jQuery实例
$(id).html( $li );
/* if(closeUploader()){ */
// 创建缩略图
// 如果为非图片文件，可以不用调用此方法。
// thumbnailWidth x thumbnailHeight 为 100 x 100
closeUploader(uploader);
uploader.makeThumb( file, function( error, src ) {
if ( error ) {
$img.replaceWith('<span>不能预览</span>');
return;
}
$img.attr( 'src', src );
// }, thumbnailWidth, thumbnailHeight );
});
});}
// 删除文件
/*
* $(id).on("click", ".stateweq", function() { var $ele = $(this);
* var id = $ele.closest("div").find(".hdid").text(); var file =
* uploader.getFile(id); uploader.removeFile(file); $('#' +
* file.id).remove(); });
*/
uploader.on("error", function(type){ //设置文件上传大小不能超过默认值
if(type == "Q_TYPE_DENIED"){
dialogMsg( "myModal", "messageP", "请上传JPG,PNG格式文件");
} else if(type == "F_EXCEED_SIZE"){
dialogMsg("myModal","messageP","文件大小不能超过8M");
}
})
// 文件上传过程中创建进度条实时显示。
/*
* uploader .on( 'uploadProgress', function(file, percentage) { var
* $li = $('#' + file.id), $percent = $li .find('.progress
* .progress-bar');
* // 避免重复创建 if (!$percent.length) { $percent = $( '<div
* class="progress progress-striped active">' + '<div
* class="progress-bar" role="progressbar" style="width: 0%">' + '</div>' + '</div>')
* .appendTo($li) .find('.progress-bar'); }
*
* $li.find('p.state').text('上传中');
*
* $percent.css('width', percentage * 100 + '%'); });
*/
// 文件上传失败会派送uploadError事件，成功则派送uploadSuccess事件。不管成功或者失败，在文件上传完后都会触发uploadComplete事件。
uploader.on('uploadSuccess', function(file) { // 成功后刷新页面
$('#' + file.id).find('span.state').text('已上传');
$('#' + file.id).find('.stateweq').remove();
window.location.reload();
});
uploader.on('uploadError', function(file) { // 失败后刷新页面
$('#' + file.id).find('span.state').text('上传出错');
WingsDialog.alert("提示","logo信息保存失败 请重新操作！",{
onhidden:function(){
window.location.reload();
}
});
});
/*
* uploader.on('error', function(handler) { if (handler ==
* "Q_EXCEED_NUM_LIMIT") { alert("只能上传一张图片"); } });
*/
uploader.on('uploadComplete', function(file) {
$('#' + file.id).find('.progress').fadeOut();
});
/*如果上传图片同时 带参数*/
/*uploader.on('uploadBeforeSend', function(block, data) {
var proName = $("#proName").val();
if(proName==""){
proName="defaultName";
}
block.file.name= proName; // 将存在file对象中的md5数据携带发送过去。
}, 2);*/
/* }; */
// 完成上传完了，成功或者失败，先删除进度条。
uploader.on('uploadComplete', function(file) {
$('#' + file.id).find('.progress').remove();
});
/*
* // 创建图片显示位置 this.pictureShow = function(id) {
* }
*/
/**/
// 文件上传开始事件
this.fileStart = function() {
uploader.upload();
}
//清空文件列表 例如重置按钮可调用此方法 不能用页面元素清空的方法因为清空后无法下次选择图片
this.reset=function(){
uploader.reset();
}
return this;
};
// 默认设置
$.fn.wingsUploader.defaults = {
swf : '/gxyt/gxyt008/need/Uploader.swf', //指向Uploader.swfserver : '', // 文件接收的服务端
pick : '', // 展示文件的id
auto : true, // 选完文件后是否自动上传
resize : false, // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
}; })(window.jQuery);
function selectFile(file) {
var html = '', i = 0; $("#preview").html('<div class="upload_loading"></div>');
var funAppendImage = function() {
if (file) {
var reader = new FileReader() reader.onload = function(e) {
html = html + '<div id="uploadList_' + i + '" class="upload_append_list"><p><strong>' + file.name + '</strong>' + '<a href="javascript:" class="upload_delete" title="删除" data-index="' + i + '">删除</a><br />' + '<img id="uploadImage_' + i + '" src="' + e.target.result + '" class="upload_image" /></p>' + '<span id="uploadProgress_' + i + '" class="upload_progress"></span>' + '</div>';
i++;
funAppendImage();
}
reader.readAsDataURL(file); } else {
$("#preview").html(html); if (html) { // 删除方法 $(".upload_delete").click( function() { FILE.funDeleteFile(files[parseInt($(this).attr( "data-index"))]); return false; });
// 提交按钮显示 $("#fileSubmit").show(); } else { // 提交按钮隐藏 $("#fileSubmit").hide(); } } }; funAppendImage(); } /* 关闭上传框窗口后恢复上传框初始状态 */
function closeUploader(uploader) {
// 移除所有缩略图并将上传文件移出上传序列
for (var i = 0; i < uploader.getFiles().length-1; i++) {
// 将图片从上传序列移除
uploader.removeFile(uploader.getFiles()[i]);
// uploader.removeFile(uploader.getFiles()[i], true);
// delete uploader.getFiles()[i]; // 将图片从缩略图容器移除
/* * var $li = $('#' + uploader.getFiles()[i].id); *
$li.off().remove(); */ return uploader.getFiles().length;
}
/* * setState('pedding'); */
// 重置文件总个数和总大小 /* * fileCount = 0; fileSize = 0; * // 重置uploader，目前只重置了文件队列 uploader.reset(); * // 更新状态等，重新计算文件总个数和总大小 updateStatus(); */ } // 创建上传的文件
怎样传文件的同时，传递参数 可uploader.on('uploadBeforeSend', function(block, data) { var proName = $("#proName").val();
if(proName==""){ proName="defaultName"; } block.file.name= proName; // 将存在file对象中的md5数据携带发送过去。 }, 2);该方法在文件发送前触发 可携带参数 这里是要传递logo图片的同时，传递产品名称由于后台的接受限制又不需要获取文件名 所以把产品名作为文件名传递但要注意的是 如果 文件命令为aa.jpg proName是 bb 那么通过此方法将获得proName的值为bb 但是如果proName为空值 那么将默认传递文件名 后台获得的proName的值将为aa
后台可用 final String proName = (String) list.get(0).getName();进行接收
当要注意 该方法只有触发了uploader插件才执行 所以对于只进行名称修改 而不做图片修改来说并不适用 本次是把文件名称抽出来单独进行保存 与文件保存分开。
function initSuccess(res) {// 初始化用// 初始化wingsUploader //picker 用于图片上传
var uploader = $('#picker')
.wingsUploader(
{
server : "/ajax.sword?ctrl=GxytGnzjImageCtrl_saveImageData,
auto : false,
pick : {
id : "$('#picker')",
multiple : false
},
fileSingleSizeLimit : 8 * 1024 * 1024,// 设定单个文件大小
// fileNumLimit:1,
// 只允许选择图片文件
accept : {
title : 'Images',
extensions : 'gif,jpg,jpeg,bmp,png,svg',
mimeTypes : 'image/gif,image/jpeg,image/jpg,image/png,image/svg,image/bmp'
},
thumb : {
// width: 110,
// height: 110,
// 图片质量，只有type为`image/jpeg`的时候才有效。
quality : 70,
// 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false.
allowMagnify : true,
// 是否允许裁剪。
crop : false
// 为空的话则保留原有图片格式。
// 否则强制转换成指定的类型。
// type: 'image/jpeg'
},
successfun : function() {
},
errorFun : function() {
}
});
uploader.pictureShow("#preview");
var $btn = $('#ctlBtn');
var $delbtn = $('#delBtn');
$btn.click(function() { $btn 保存按钮
uploader.fileStart();//上传文件
saveProName();//点击保存时 调用的其它方法
savaXuan();//点击保存时 调用的其它方法
});
}
jsp
<div id="list" class="uploader-list"></div>
<div class="btns">
<div style="margin-top: -10px;">
<div class="weui_uploader_input_wrp">
<div class="weui_uploader_input" id="picker"></div> //插件将自动生成input
</div>
</div>
<div class="form-group" style="overflow: hidden;">
<div id="uploader" class="wu-example" style="">
<form id="uploadForm" action="upload.php" method="post"
enctype="multipart/form-data">
<div class="upload_box">
<div class="upload_main" style="background:#fff;">
<div id="preview" class="upload_drag_area" style=""></div>//用于图片预览
</div>
</div>
</form>
</div>
</div>
java Ctrl：
@SuppressWarnings("unchecked")
public IResData saveImageData(IReqData req) throws SwordBaseCheckedException, FileUploadException, IOException {
final IResData res = new SwordRes();
final List<FileItem> list = req.getUploadList();//得到文件这里默认使用list<FileItem> 来接收//final String proName = (String) list.get(0).getName();
final FileItem filetem = list.get(0);//创建文件filetem对象 用于后续获取文件大小 类型等
final InputStream stream = filetem.getInputStream();// 以流的形式返回上传文件的主体内容 建立一个连接到所传图片的位置的流 并将数据源中的数据转换为流对象
// 获取文件相关的信息
final byte[] bytes = IOUtils.toByteArray(stream);// 进文件inputStream流转化为byte[]数组 用于读取写文件
final Long fileSize = filetem.getSize();// 文件大小
final String fileLx = filetem.getContentType();// 文件类型
//final String fileName = filetem.getName();// 文件名称
final HttpServletRequest request = ContextAPI.getReq();//HttpServletRequest对象代表客户端的请求，当客户端通过HTTP协议访问服务器时，
//HTTP请求头中的所有信息都封装在这个对象中，通过这个对象提供的方法，可以获得客户端请求的所有信息
final String path = request.getSession().getServletContext().getRealPath("/gxyt/logo");//获得服务器相对于/gxyt/logo的地址
final File filepackpath = new File(path); //以该地址创建一个文件
if (filepackpath.exists()) {// 如果该文件夹存在 删除文件夹里所有的文件
deleteAll(filepackpath);
//filepackpath.delete();
} else { //如果文件夹不存在 创建文件夹
filepackpath.mkdirs();// 新建
}
final Map<String, Object> fileMap = new HashMap<String, Object>();
fileMap.put("filePath", File.separator + "gxyt" + File.separator + "logo" + File.separator);
fileMap.put("fileSize", fileSize);
fileMap.put("fileLx", fileLx);
//fileMap.put("proName", proName);
/* final Map<String, Object> filemap = (Map<String, Object>) SwordServiceUtils.callService("SWZJ.DSJYPT.GXYT010.SAVEIMAGEDATA", fileMap);
final String tempFilePath = (String) filemap.get("filePath");//得到文件位置(Map<String, Object>)
if (filemap.get("flag").equals(1)) {//文件路径保存成功 flag=1 图片写入服务器
final File filepath = new File(tempFilePath);
final OutputStream bos = new FileOutputStream(filepath);
while ((bytesRead = stream.read(file, 0, file.length)) != -1) {
bos.write(file, 0, bytesRead);// 将文件写入服务器
}
bos.close();
stream.close();
}*/
int bytesRead = 0; //stream,read();方法每次返回的都是int类型
while ((bytesRead = stream.read(bytes, 0, bytes.length)) != -1) {//读文件个数
final Map<String, Object> filemap = (Map<String, Object>) SwordServiceUtils.callService("SWZJ.DSJYPT.GXYT010.SAVEIMAGEDATA", fileMap);//请求一次路径
//final String tempFilePath = (String) filemap.get("filePath");//得到文件位置(Map<String, Object>)
final String tempFilePath = filepackpath + File.separator + "logo." + fileLx.substring(fileLx.lastIndexOf("/") + 1);//得到文件路径（带有文件的）
if (filemap.get("flag").equals(1)) {//文件路径保存成功 flag=1 图片写入服务器
final File filepath = new File(tempFilePath);//以这个路径创建文件
final OutputStream bos = new FileOutputStream(filepath);//创建这个路径下的输出流
bos.write(bytes, 0, bytesRead);// 进bytes数组从第一个0 到字节存在的位置 写到bos输出流里
bos.close();//关闭输出流
//图片进行压缩 采用下面方法 由于本图片文件为logo 所以不进行图片压缩
//ImageZipUtil.zipWidthHeightImageFile(new File(tempFilePath), new File(tempFilePath), 28, 28, 1.0f);//文件写入服务器之后把图片压缩为28*28 再上传
}
}
stream.close();
return res;
}
//删除文件夹里所有的文件public static void deleteAll(File file) {
if (file.isFile() || file.list().length == 0) { //传过来的参数是文件 或是 file.list().length == 0是文档等其他的 把该文件或或者文档删除
list()方法是返回某个目录下的所有文件和目录的文件名，返回的是String数组
file.delete();
} else { //如果文件夹下有文件 上一步操作将失败 执行else语句
final File[] files = file.listFiles(); //对文件夹的文件进行遍历
for (int i = 0; i < files.length; i++) {
deleteAll(files[i]); //递归 防止文件夹下还有 有文件的文件夹
files[i].delete(); //删除所有文件
}
}
}
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
