jquery之图片上传
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <c:set var="ctx" value="${pageContext.request.contextPath}" /> <jsp:include page="/jsp/common/header.jsp"></jsp:include> <jsp:include page="/jsp/common/common_upload.jsp"></jsp:include> <script src="${ctx }/js/homepage/home_page_img.js"></script> <script type="text/javascript"> $(function() { $("#divStatus").hide(); initSWFUpload({ flash_url : "${ctx }/js/lib/SWFUpload/Flash/swfupload.swf", upload_url: "${ctx }/page/ecUpload/pic/homepage", file_post_name:'uploadFile', use_query_string:true, post_params: {"uploadUserId":"<%=session.getAttribute("userId")%>"}, file_size_limit : "10 MB", file_types : "*.jpg;*.gif;*.png", file_types_description : "All Files", file_upload_limit : 100, file_queue_limit : 0, custom_settings : { progressTarget : "fsUploadProgress", cancelButtonId : "btnCancel" }, debug : false, // Button settings button_image_url : appPath + "/js/lib/SWFUpload/images/uploadall.png", button_width : "61", button_height : "22", button_placeholder_id : "spanButtonPlaceHolder", button_text : '<span class="theFont"></span>', button_text_style : ".theFont { font-size: 16; }", button_text_left_padding : 12, button_text_top_padding : 3, button_action : SWFUpload.BUTTON_ACTION.SELECT_FILE, file_queued_handler : fileQueued, file_queue_error_handler : fileQueueError, file_dialog_complete_handler : fileDialogComplete, upload_start_handler : uploadStart, upload_progress_handler : uploadProgress, upload_error_handler : uploadError, upload_success_handler : uploadPicSuccess, upload_complete_handler : uploadComplete, queue_complete_handler : queueComplete }); }); </script> <!-- 判断类型 --> <input type="hidden" id="imgType" name="imgType" value="<%=request.getParameter("imgType")%>"> <table class="queryTable"> <tr> <td class="queryTitle" width="80px">图片链接</td> <td class="queryContent"><input class="inputText" type="text" id="queryUrl" /></td> <td class="queryTitle" width="80px">图片标题</td> <td class="queryContent"><input class="inputText" type="text" id="queryImageTopic" /></td> <td class="queryBtnTd"><a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-search" onclick="doQuery()">检索</a> </td> </tr> </table> <table id="queryImgShow" style="display:none"> <tr> <td class="queryTitle" style="font-size:13px; background:white;border:0px" width="80px" valign="top">排序规则</td> <td ><img id="imgOrderShow" width="350px" height="350px" alt="" src="" /></td> </tr> </table> <table id="queryInfoGrid"></table> <div id="addDlg" class="easyui-window" title="" closed="true" iconCls="icon-save" style="width: 582px; height: 500px; text-align: center; background: #fafafa;"> <div class="easyui-layout" fit="true"> <div region="center" border="false" style="background: #fff; border: 1px solid #ccc; padding-left: 30px;"> <form id="addForm" method="POST" style="width: 580px; height: 210px; text-align: center;"> <table id="myTable" border="0" class="queryTable" width="450px" height="210px" style="margin-bottom: 0px"> <tr> <td class="queryTitle">排序:<input type="hidden" id="addId" /></td> <td class="queryContent"><input type="text" id="addOrderNum" name="addOrderNum" class="inputText easyui-validatebox" required="true" /></td> </tr> <tr> <td class="queryTitle">上传图片:</td> <td class="queryContent" colspan="30"><span id="spanButtonPlaceHolder"></span> <span style="color: red; font-size: 10px" id="spanSize"></span> <br> <br> <img id="uploadImg" src="${ctx }/images/common/emptyImg.jpg" style="border: solid 1px #ccc; padding: 3px; width: 50px; height: 36px; cursor: hand" /> <div id="content"> <div id="divStatus">0个文件已经上传</div> <div id="fsUploadProgress"></div> <input id="btnCancel" type="button" value="Cancel All Uploads" onclick="swfu.cancelQueue();" disabled="disabled" style="margin-left: 2px; font-size: 8pt; height: 25px; display: none" /> <span id="batchNoUploadId" style="display: none;"></span> </div> <input type="hidden" id="imageUrl" name="imageUrl" class="inputText" /> </td> </tr> <tr> <td class="queryTitle">广告链接:</td> <td class="queryContent"><input type="text" id="addUrl" name="addUrl" class="inputText easyui-validatebox" required="true" /> <font color="red" id="tag" style="display: none">(必须以http://开头)</font></td> </tr> <tr> <td class="queryTitle">图片标题:</td> <td class="queryContent"><input type="text" id="addImageTopic" name="addImageTopic" class="inputText easyui-validatebox" required="true" /></td> </tr> <tr> <td class="queryTitle" width="70px">开始时间:</td> <td class="queryContent"><input type="text" id="addbegintime" style="width: 125px" editable="false" /></td> </tr> <tr> <td class="queryTitle" width="70px">结束时间:</td> <td class="queryContent"><input type="text" id="addendtime" style="width: 125px" editable="false" /> <font color="red">(选填)</font></td> </tr> </table> </form> </div> <div region="south" border="false" style="text-align: center; height: 30px; line-height: 30px;"> <a class="easyui-linkbutton" iconCls="icon-ok" href="javascript:void(0)" onclick="save()">保存</a> <a class="easyui-linkbutton" iconCls="icon-cancel" href="javascript:void(0)" onclick="closeWin('addDlg')">关闭</a> </div> </div> </div> <img id="showImgDetail" style="position: absolute; display: none; border: 1px #EEEEFF solid;" alt="" src="" />
var flag=false; $(function() { $("#addDlg").window("close"); $("#addUrl").blur(function(){ if(flag){ $("#addUrl").css("border-color","#A4BED4"); flag=false; } }); //日期控件 $('#addbegintime').datetimebox({ showSeconds:true, editable:false }); $('#addendtime').datetimebox({ showSeconds:true, editable:false }); var pageImg = new Object(); pageImg.codeId=Number($("#imgType").val()); pageImg.codeType="homePageImgOrder"; doAjax({ url : appPath + '/page/pageIndexMrgAct/getImgConfig', type : 'post', data : pageImg, dataType : 'json', success : function(data) { if(data.code==0){ if(data.data.url!=null && data.data.url!=''){ $("#imgOrderShow").attr("src", data.data.url); $("#queryImgShow").show(); } }; }, error : function(XMLHttpRequest, textStatus, errorThrown) { $.messager.alert('提示信息', '操作未能完成' + textStatus, 'error'); } }); $("#queryInfoGrid") .datagrid( { url : appPath + "/page/pageIndexMrgAct/getImgPage/", height : "full", idField : 'id', striped : true, remoteSort : false, pagination : true, rownumbers : true, singleSelect : false, queryParams : getQueryParam(), frozenColumns : [ [ { field : 'ck', checkbox : true } ] ], columns : [ [ { field : 'orderNum', title : '排序', width : 100, align : 'center', sortable : true, formatter:function(value,rowData,rowIndex){ var obj=JSON.stringify(rowData); return "<input type='text' id='orderNum"+rowIndex+"' style='width: 76px;' value='"+value+"' onchange='onblus(this,"+obj+")'/>"; } }, { field : 'opt', title : '操作', width : 40, align : 'center', formatter : function(value, rowData, rowIndex) { var html="<img class='op-enable' src='"+appPath+"/js/lib/jquery-easyui/themes/icons/pencil.png' onClick='showWin("+rowData.id+")' title='修改'/>"+ " <img class='op-enable' src='"+appPath+"/js/lib/jquery-easyui/themes/icons/cancel.png' onClick='cancel("+rowData.id+")' title='删除'/>"; return html; }}, { field : 'imageUrl', title : '图片', width : 80, align : 'center', sortable : false, formatter : function(value, rowData, rowIndex) { if (value == null || value == '') { return "<img border='0' src='" + appPath + "/js/lib/jquery-easyui/themes/icons/blank.gif" + "' />"; } else { return "<img title='显示图片' onMousemove=\"mouseOn(event)\" onmouseout='mouseOff()' rel='" + rowData.imageUrl + "' src='" + appPath + "/js/lib/jquery-easyui/themes/icons/search.png" + "' />"; } } }, { field : 'url', title : '广告链接', width : 200, align : 'center', sortable : false }, { field : 'imageTopic', title : '图片标题', width : 100, align : 'center', sortable : false }, { field : 'time', title : '开始/结束时间', width : 300, align : 'center', sortable : false, formatter : function(value, rowData, rowIndex) { if(rowData.endTime!=null){ value=rowData.beginTime+" - "+rowData.endTime; }else{ value=rowData.beginTime+" - 2099-12-30 23:59:59"; } return value; } } ] ], toolbar : [ { id : 'btnadd', text : '新增图片', iconCls : 'icon-add', handler : function() { showWin(null); } }, { id : 'btndel', text : '批量删除图片', iconCls : 'icon-close', handler : function() { deletes(); } } ] }); }); function getQueryParam() { var pageIndexImg = new Object(); pageIndexImg.imageType=Number($("#imgType").val()); pageIndexImg.url= $.trim($('#queryUrl').val()); pageIndexImg.imageTopic=$.trim($('#queryImageTopic').val()); return pageIndexImg; } function doQuery() { $("#queryInfoGrid").datagrid('load', getQueryParam()); } function deletes() { var selections = $("#queryInfoGrid").datagrid('getSelections'); if (selections == null || selections == '') { $.messager.alert('提示信息', '请选择要删除的行', 'info'); return; } else { var ids = ''; for ( var i = 0; i < selections.length; i++) { ids += selections[i].id + ','; } $.messager.defaults = { ok: "确定", cancel: "取消" }; $.messager.confirm('提示信息', "您将删除选中的全部图片!", function(r) { if (r) { $.post(appPath + "/page/pageIndexMrgAct/batchDelete", { "ids" : ids, "imageType":Number($("#imgType").val()) }, function(data) { if(data.code==0){ $.messager.alert('提示信息', '删除成功', 'info'); doQuery(); }else{ $.messager.alert('提示信息', data.msg+',操作失败', 'error'); } }); } }); } } // 图片显示,鼠标移入事件 function mouseOn(e) { if ($("#showImgDetail").not(":visible")) { var dom = e.srcElement || e.target; var tp = $(dom).offset().top; var lf = $(dom).offset().left + $(dom).width() + 10; $("#showImgDetail").attr("src", $(dom).attr("rel")); $("#showImgDetail").css("top", tp); $("#showImgDetail").css("left", lf); $("#showImgDetail").show(); } } // 图片显示,鼠标移出事件 function mouseOff() { $("#showImgDetail").hide(); } //填写顺序 后实时保存 function onblus (obj,data){ var orderNum = $(obj).attr("value"); if(orderNum==null || orderNum==''){ $(obj).attr("value",data.orderNum); return; } var flag2=validateNum(orderNum); if(!flag2){ $.messager.alert('提示信息','排序请填写正确的0~99之间的自然数','info',function(){ $(obj).attr("value",data.orderNum); $(obj).focus(); }); return; } var pageIndexImg = new Object(); pageIndexImg.orderNum=orderNum; pageIndexImg.imageType=Number($("#imgType").val()); pageIndexImg.id=data.id; doAjax({ url : appPath + '/page/pageIndexMrgAct/update', type : 'post', data : pageIndexImg, success : function(data) { if (data.code != 0) { $.messager.alert('提示信息', data.msg + ',操作失败', 'error'); } }, error : function(XMLHttpRequest, textStatus, errorThrown) { $.messager.alert('提示信息', '排序保存失败' + textStatus, 'error'); } }); } function showWin(id) { $("#spanSize").html(""); $("#addId").val(""); $("#addOrderNum").val(""); $("#addImageTopic").val(""); $("#addUrl").val(""); $("#imageUrl").val(""); $("#uploadImg").attr("src", appPath + "/images/common/emptyImg.jpg"); $("#addbegintime").datebox("setValue",""); $("#addendtime").datebox("setValue",""); var param=new Object(); param.codeId=Number($("#imgType").val()); param.codeType="homePageImgSize"; doAjax({ url : appPath + '/page/pageIndexMrgAct/getImgConfig', type : 'post', data : param, dataType : 'json', success : function(data) { if(data.code==0){ if(data.data.words!=null && data.data.words!=''){ $("#spanSize").html("(建议尺寸:"+data.data.words+")"); } if(data.data.url=='check'){ $("#tag").show(); } if(data.data.standby1=='hideTime'){ $("#myTable tr:gt(3)").hide(); } }; }, error : function(XMLHttpRequest, textStatus, errorThrown) { $.messager.alert('提示信息', '操作未能完成' + textStatus, 'error'); } }); var iconStr = "icon-add"; var title = "添加图片"; if (id != null) { iconStr = "icon-edit"; title = "编辑图片"; doAjax({ url : appPath + '/page/pageIndexMrgAct/getImgById', type : 'post', data : { id : id }, dataType : 'json', success : function(data) { $("#addId").val(data.data.id); $("#addImageTopic").val(data.data.imageTopic); $("#addOrderNum").val(data.data.orderNum); $("#imageUrl").val(data.data.imageUrl); $("#addUrl").val(data.data.url); $("#uploadImg").attr("src", data.data.uploadUrl); $("#addbegintime").datebox("setValue",data.data.beginTime); $("#addendtime").datebox("setValue",data.data.endTime); }, error : function(XMLHttpRequest, textStatus, errorThrown) { $.messager.alert('提示信息', '操作未能完成' + textStatus, 'error'); } }); } $('#addDlg').window({ title : title, iconCls : iconStr, width : 580, height : 300, left : 200, modal : true, shadow : true, collapsible : false, minimizable : false, maximizable : false }); $('#addDlg').window('move', { top : 100 }); $('#addDlg').window('open'); } function closeWin(id) { if(id='addDlg'){ if($("#addOrderNum").val()=='' && $("#imageUrl").val()=='' && $("#addUrl").val()=='' && $("#addImageTopic").val()=='' && $("#addbegintime").datebox("getValue")=='' && $("#addendtime").datebox("getValue")==''){ $('#'+id).window('close'); }else{ $.messager.defaults = { ok: "是", cancel: "否,继续填写" }; $.messager.confirm('提示信息','将丢失已经填写的内容,是否继续关闭?',function(r){ if(r){ $('#'+id).window('close'); } }); } }else{ $('#'+id).window('close'); } } function save() { if ($("#addOrderNum").val() == null || $("#addOrderNum").val() == '') { $.messager.alert('提示信息', '请填写排序', 'info'); return; } var flag2=validateNum($("#addOrderNum").val()); if(!flag2){ $.messager.alert('提示信息','排序请填写正确的0~99之间的自然数','info'); return; } //首页-热搜时,图片非必填项 if(Number($("#imgType").val()) != 11){ if ($("#imageUrl").val() == null || $("#imageUrl").val() == '') { $.messager.alert('提示信息', '请上传图片', 'info'); return; } } if ($("#addUrl").val() == null || $("#addUrl").val() == '') { $.messager.alert('提示信息', '请填写链接', 'info'); return; } if($("#addUrl").val().length>1000){ $.messager.alert('提示信息', '链接超出规定字符范围(1000以内)', 'info'); return; } if(!$("#tag").is(":hidden")){ if($.trim($("#addUrl").val()).substr(0,7)!='http://'){ $.messager.alert('提示信息', '链接格式错误,请以http://开头!', 'info'); $("#addUrl").css('border-color','red'); flag=true; return; } } if ($("#addImageTopic").val() == null || $("#addImageTopic").val() == '') { $.messager.alert('提示信息', '请填写标题', 'info'); return; } var len=getByteLen($.trim($("#addImageTopic").val())); if(len>40){ $.messager.alert('提示信息', '标题最大40个字符', 'info'); return; } if(!$("#myTable tr:gt(3)").is(":hidden")){ if ($("#addbegintime").datebox("getValue") == null ||$("#addbegintime").datebox("getValue") == '') { $.messager.alert('提示信息', '请选择开始时间', 'info'); return; } } if($("#addendtime").datebox("getValue")!=null && $("#addendtime").datebox("getValue") != '' && $("#addbegintime").datebox("getValue") > $("#addendtime").datebox("getValue")) { $.messager.alert('提示信息','开始时间要小于或等于结束时间','info'); return false; } var pageIndexImg = new Object(); if($("#addId").val()!=null && $("#addId").val()!=''){ pageIndexImg.id=$("#addId").val(); } pageIndexImg.imageType=Number($("#imgType").val()); pageIndexImg.orderNum= $.trim($('#addOrderNum').val()); pageIndexImg.imageUrl=$.trim($("#imageUrl").val()); pageIndexImg.url=$.trim($("#addUrl").val()); pageIndexImg.imageTopic=$.trim($("#addImageTopic").val()); pageIndexImg.beginTime=$("#addbegintime").datebox("getValue"); if($("#addendtime").datebox("getValue") != null && $("#addendtime").datebox("getValue") != ''){ pageIndexImg.endTime=$("#addendtime").datebox("getValue"); } doAjax({ url : appPath + '/page/pageIndexMrgAct/opreatePageIndexImg', type : 'post', data : pageIndexImg, success : function(data) { if (data.code == 0) { $.messager.alert('提示信息', '保存成功', 'success'); $('#addDlg').window('close'); doQuery(); } else { $.messager.alert('提示信息', data.msg + ',操作失败', 'error'); } }, error : function(XMLHttpRequest, textStatus, errorThrown) { $.messager.alert('提示信息', '操作未能完成' + textStatus, 'error'); } }); } function cancel(id){ var pageIndexImg = new Object(); pageIndexImg.id=id; pageIndexImg.imageType=Number($("#imgType").val()); pageIndexImg.isDelete='Y'; $.messager.defaults = { ok: "确定", cancel: "取消" }; $.messager.confirm('提示信息','您确定要删除?',function(r){ if(r){ doAjax({ url : appPath + '/page/pageIndexMrgAct/update', type : 'post', data : pageIndexImg, success : function(data) { if (data.code == 0) { $.messager.alert('提示信息', '删除成功', 'success'); doQuery(); } else { $.messager.alert('提示信息', data.msg + ',操作失败', 'error'); } }, error : function(XMLHttpRequest, textStatus, errorThrown) { $.messager.alert('提示信息', '操作未能完成' + textStatus, 'error'); } }); } }); } // 图片上传成功事件 function uploadPicSuccess(file, serverData) { try { try { serverData = eval("(" + serverData + ")"); if (typeof (serverData.code) != "undefined" && serverData.code != 0) { this.uploadError(file, serverData.code, serverData.msg); } else { var path = serverData.newFileName; $("#uploadImg").attr("src", "http://img01.j1.com" + path); $("#imageUrl").val("http://img01.j1.com" + path); var progress = new FileProgress(file, this.customSettings.progressTarget); progress.setComplete(); progress.setStatus("完成."); progress.toggleCancel(false); } } catch (e) { var progress = new FileProgress(file, this.customSettings.progressTarget); progress.setComplete(); progress.setStatus("完成."); progress.toggleCancel(false); } } catch (ex) { this.debug(ex); } } function validateNum (obj){ var reg =/^\d{1,2}$/;; if (!reg.test(obj)) { return false; } return true; } //返回val的字节长度 function getByteLen(val) { var len = 0; for (var i = 0; i < val.length; i++) { if (val[i].match(/[^\x00-\xff]/ig) != null) //全角 len += 2; else len += 1; } return len; }
jquery之图片上传的更多相关文章
- Jquery自定义图片上传插件
1 概述 编写后台网站程序大多数用到文件上传,可是传统的文件上传控件不是外观不够优雅,就是性能不太好看,翻阅众多文件上传控件的文章,发现可以这样去定义一个文件上传控件,实现的文件上传的效果图如下: 2 ...
- jquery实现图片上传前本地预览
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...
- jquery 实现图片上传,并在前端显示出来
目前遇到一个图片上上传的需求,突然发现,原来之前都没有做过此种类型的需求,以下是需求样式: 看到需求后之所以有点懵,是因为我接触到的文件上传,一般都是按钮类型的,例如以下这种: 深呼吸,好好想一下,整 ...
- jQuery plugins 图片上传
http://plugins.jquery.com/ 用到一下插件: magnific popup 看大图 jQuery File Upload 多文件上传 jQuery Rotate 图片旋转 gi ...
- ThinkPHP5与JQuery实现图片上传和预览效果
内容正文 这篇文章主要为大家详细介绍了thinkphp上传图片功能,和jquery预览图片效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 先上效果图: html和js代码如下: <!DO ...
- 基于jquery实现图片上传本地预览功能
一.原理 分为两步: 当上传图片的input被触发并选择本地图片之后获取要上传的图片这个对象的URL(对象URL),把对象URL赋值给事先写好的img标签的src属性即可把图片显示出来.在这里,我们需 ...
- JQuery实现 图片上传
用到的文件,我都已经打包好了,自行下载: https://files.cnblogs.com/files/lguow/lib.rar 核心代码如下: <input type="hidd ...
- jquery实现图片上传前本地预览功能
HTML <img id="pic" src="" > <input id="upload" name="fil ...
- jquery实现图片上传前的预览
html代码 <div id="uploadPreview"></div> <input id="uploadImage" typ ...
随机推荐
- iOS中忽略NSLog打印信息(通过PCH文件中定义DEBUG宏解决)
iOS中忽略NSLog打印信息 解决办法: 1.新建PrefixHeader_pch文件,在该文件中定义一下宏 //通过DEBUG宏的定义来解决Debug状态下和Release状态下的输出 #ifde ...
- 若后台的Activity被系统回收...
你后台的Activity被系统回收怎么办?如果后台的Activity由于某种原因被系统回收了,如何在被系统回收之前保存当前状态? 除了在栈顶的Activity,其他的Activity都有可能在内存不足 ...
- 深入mysql慢查询设置的详解
set long_query_time=1; #设置慢查询时间为1 秒; set global slow_query_log=on; #开启慢查询日志; show global status like ...
- 用dup2和dup产生一份file descriptor 的拷贝
在类Unix操作系统里面,.dup2和dup都通过系统调用来产生一份file descriptor 的拷贝. dup对我来说还很简单 int dup(int filedes); dup2就 ...
- web登录与授权
web开发已经流行了很多年,登录与授权也基本有一套通用的流程,下面是我自己常用的登录与授权方式,欢迎大家讨论与吐槽. 概念: 登录是过程,授权是结果.登录只是为了获得页面的访问权限 or 操作权限 o ...
- 利用Cocoapods、SVN 创建私有库实现方案(yoowei)
由于项目年后要进行组件化,考虑到如果公司内部实现一些私有的组件,不对外公开,而又想在不同项目中使用,该怎么办呢? 使用Cocoapods制作私有库就完美的解决了这个问题.下图就是使用私有库带给我们的好 ...
- Solr Dataimport配置
参考资料: https://cwiki.apache.org/confluence/display/solr/Uploading+Structured+Data+Store+Data+with+the ...
- 刷入临时recovery
@echo off @echo 手机进 Fastboot 模式 fastboot.exe boot recovery.img @echo. @echo 等待手机进入临时REC pause echo o ...
- Sicily 1936. Knight Moves
题目地址:1936. Knight Moves 思路: 这道题一开始不理解题意…orz...囧,看大神们理解的. 题意是说一个8*8的国际象棋,骑士以马的形式走动(“日”字型),指定两个点,输出最小的 ...
- CentOS 6.5 + Nginx 1.8.0 + PHP 5.6(with PHP-FPM) 负载均衡源码安装 之 (二)PHP(PHP-FPM)安装篇
编译安装PHP及内置PHP-FPM nginx本身不能处理PHP,它只是个web服务器,当接收到请求后,如果是php请求,则发给php解释器处理,并把结果返回给客户端(浏览器). nginx一般是把请 ...