关于文件上传-图片上传
Posted 橘子红
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了关于文件上传-图片上传相关的知识，希望对你有一定的参考价值。
本次开发采用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.swf
server : ‘‘, // 文件接收的服务端
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&proName=" + $("#proName").val(), 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.delete();
} else {
final File[] files = file.listFiles();
for (int i = 0; i < files.length; i++) {
deleteAll(files[i]);
files[i].delete();
}
}
}
以上是关于关于文件上传-图片上传的主要内容，如果未能解决你的问题，请参考以下文章