js中图片显示用ajax,javascript - 前台用ajax上传图片,怎么让图片上传完成显示的缩略图片的时候显示分辨率大小...
以下是相关代码,现在就是上传上去想让显示以下分辨率,也就是图片的大小,请问应该怎么该才可以,求解答
前台上传文件代码
window.οnlοad=function(){
var type=document.getElementById('hidType').value;
var obj = document.getElementsByName('USER_TYPE');
for(var i=0;i
if(type==obj[i].value){
obj[i].checked=true;
}
}
$("#file_upload").uploadify({
'swf': "/uploadify/uploadify.swf",
'fileObjName': 'file',
'uploader': "/uploadlist.do?action=uploadify",
//'uploader': "http://10.21.67.16:8080/file/upload/savefile.shtml",
'auto': true,
'removeTimeout': 0,
'width': 180,
'height': 30,
'buttonClass':'btn btn-primary',
'multi': false,
'uploadLimit': 9,
'fileSizeLimit': "5MB",
'fileTypeDesc': '图片文件(*.jpg;*.png;*.gif;*.jpeg)',
'buttonText': '添加图片',
'fileTypeExts': "*.jpg;*.png;*.gif;*.jpeg",
'progressData': 'percentage',
'speed': 'percentage',
'queueSizeLimit': 1,
'removeCompleted': true,
'onSelect': function(file) {
this.queueData.filesErrored = 0;
},
'onOpen': function(event, ID, fileObj) {},
'onSelectError': function(file, errorCode, errorMsg) {
/* for (var i = 0; i < errorCodes.length; i++) {
if (errorCodes[i] == errorCode) {
this.queueData.errorMsg = errorMsgs[i];
}
} */
},
'onFallback': function() {
alert("浏览器不能兼容Flash,请下载最新版!");
},
'onUploadSuccess': function(file, data, response) {
var dataObj = $.parseJSON(data);
if (dataObj.status) {
$("#circle_image").show();
$('#show_image').append('
x
');
$(".delete").off('click');
$(".delete").on("click",function(){
$(this).parent().remove();
});
var num = $("input[name='CIRCLE_IMAGE']").length;
if(num > 8){
$('#file_upload').uploadify('disable', true);
}
} else {
alert(dataObj.message);
}
},
'onUploadError': function(file, errorCode, errorMsg, errorString) {
}
});
}
后台处理代码
public void uploadify(HttpServletRequest request, HttpServletResponse response) {
response.setContentType("text/plain; charset=GBK");
response.setHeader("Pragma", "No-cache"); // 设置页面不缓存
response.setHeader("Cache-Control", "no-cache");
response.setDateHeader("Expires", 0);
PrintWriter out=null;
Map jsonMap = new HashMap();
String path = "";// 图片
String thumbPath = "";//缩略图片
// 2.为该请求创建一个句柄,通过它来解析请求。执行解析后,所有的表单项目都保存在一个List中。
DiskFileUpload upload = new DiskFileUpload();
// 通过句柄解析请求,解析得到的项目保存在一个List中
List items;
try {
items = upload.parseRequest(request);
// 3.通过循环依次获得List里面的文件项目。要区分表示
// 文件的项目和普通的表单输入项目,使用isFormField()
// 方法。根据处理请求的要求,我们可以保存上载的文
// 件,或者一个字节一个字节地处理文件内容,或者打开文件的输入流。
Iterator itr = null;
FileItem item = null;
String strRealPath = request.getSession().getServletContext()
.getRealPath("/");
String dirTemp = strRealPath + "upfile";// 临时目录
String uploadFolder = PubFunction.getYearMonth();
String savePath = strRealPath + "/upfile/jxq/circle" + File.separator
+ uploadFolder + File.separator;// 保存图片文件路径
PubFunction.Mkdir(dirTemp);
PubFunction.Mkdir(savePath);
itr = items.iterator();
while (itr.hasNext()) {
item = (FileItem) itr.next();
// 检查当前的项目是普通的表单元素,还是一个上载的文件
if (item.isFormField()) {// 表单元素
} else {// 是一个上载的文件
// 设置允许上传的最大值5M
upload.setSizeMax(5 * 1024 * 1024);
// 设置缓冲区大小,这里是4kb
upload.setSizeThreshold(6 * 1024);
// 设置临时目录:
upload.setRepositoryPath(dirTemp);
String strFileName = item.getName();
String extName = strFileName.substring(strFileName
.lastIndexOf(".") + 1);
if (item.getSize() > 5 * 1024 * 1024) {
jsonMap.put("status", "0");
jsonMap.put("message", "请不要上传超过5M大小的图片!");
}
// strFileName = this.getFileName(extName, String.valueOf(user
// .getId()));
strFileName = this.getFileName(extName, "_original");
String thumbFileName = this.getFileName(extName, "_thumb");
try {
item.write(new File(savePath + strFileName));
//生成缩略图片
ImageUtilsDemo.ThumbnailsScale(savePath + strFileName,savePath + thumbFileName, 160, 160,false,"jpg");
path = "/upfile/jxq/circle/" + uploadFolder + "/" + strFileName;// 图片路径信息(相对路径)
thumbPath = "/upfile/jxq/circle/" + uploadFolder + "/" + thumbFileName;
jsonMap.put("status", "1");
jsonMap.put("path", PICTURE_SYS_PATH+path);
jsonMap.put("thumbPath", PICTURE_SYS_PATH+thumbPath);
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
jsonMap.put("status", "0");
jsonMap.put("message", "上传图片失败");
}
}
}
} catch (FileUploadException e) {
// TODO Auto-generated catch block
e.printStackTrace();
jsonMap.put("status", "0");
jsonMap.put("message", "上传图片失败");
}
try {
out = response.getWriter();
out.print(gson.toJson(jsonMap));
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
if (out != null)
out.close();
}
}
js中图片显示用ajax,javascript - 前台用ajax上传图片,怎么让图片上传完成显示的缩略图片的时候显示分辨率大小...相关推荐
- Django上传并显示图片
Django上传并显示图片 非常详细的教程,教大家一步步用Django上传与显示图片.用例子学习是一个不错的方法,下面我用一个非常简单的例子为大家讲解Django中图片的上传与显示. 1. 创建名称为 ...
- HTML5输入框里加图片代码,做了一个input上传加号框,图片上传后显示在框中,怎么让加号消失?...
CSS代码: .div_imgall {border:1px solid blue;width:100px;height:100px;position:relative;} .input_flie { ...
- php中图片文件上传,显示缩略图
php中图片文件上传,显示缩略图 htm代码块: <meta charset="utf-8" /> <style>img {max-width: 100px ...
- 阿里OSS对象存储,实现图片上传进度显示ProgressListener;
想了解阿里OSS对象存储,实现图片上传的内容的可看我的另一篇博客,博客中有完整代码,这篇博客是以上一篇阿里OSS对象存储博客为基础,只写一些与进度有关的内容,细心往下看js代码中有需要注意的地方! 实 ...
- 上传自动显示图片 代码
<html> <head> <title>上传自动显示图片</title> <script type="text/javas ...
- php实现图片上传和显示,上传和显示图片 - php - 生活点滴
php保存图片 保存上传图片有两种方法.一种是在mysql数据库中保存图片文件,另一种是在mysql中只保存文件名,而图片文件保存在php.ini配置文件中设置的upload临时目录,也就是uploa ...
- FTP上传网页显示不了图片
FTP上传网页显示不了图片 刚上班不久,昨天用FTP上传了一个网页,可是图片显示不出来 检查了图片地址 针对图片的地址做了仔细的检查,并没有错误,一时让我摸不着头脑 图片不是绝对地址 : 图片为png ...
- Asp.Net实现无刷新文件上传并显示进度条(非服务器控件实现)
相信通过Asp.Net的服务器控件上传文件在简单不过了,通过AjaxToolkit控件实现上传进度也不是什么难事,为什么还要自己辛辛苦苦来实现呢?我并不否认"拿来主义",只是我个人 ...
- Struts2实现文件上传并显示实时进度
基于浏览器的文件上传,特别是对于通过<input type="file">标签来实现上传的情况, 存在着严重的性能问题,因为用户提交了文件之后,在浏览器把文件上传到服务 ...
最新文章
- 武汉网络推广优化中网站关键词如何更合理布局分布?
- mysql not in优化_MySQL性能优化 — 实践篇2
- ubuntu安装docker下载慢,运行hello-world超时
- 「 Luogu P2420 」 让我们异或吧
- 0、elasticsearch前言
- Windows环境 和 Linux环境下搭建Qt开发环境
- C# - 简单介绍TaskScheduler
- 数据结构---哈夫曼树
- 使用tcl文件分配管脚
- 6.企业应用架构模式 --- 会话状态
- Linux Linux内核参数调优
- discuz 任务扩展
- KITTI数据集解读
- curl安装失败/区块链配置
- 我的编程之路点滴记录(五)
- Unity5入门及进阶项目实战 星际迷航-肖师军-专题视频课程
- 股票学习-量柱和k线-第一天
- CLRS 16.2贪心算法的原理
- 借win11 WSA升级12l,水一贴升级方法和说说要不要升级win11。
- n阶方阵求逆c语言报告,n阶方阵求逆