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 ...
随机推荐
- Shell中逻辑判断
[ 条件1 -a 条件2 ] 当1和2都真时才为真 [ 条件1 -o 条件2 ] 当1和2其中一个为真即为真 [ ! 条件 ] 取反 && 与 ...
- HashMap的扩容机制, ConcurrentHashMap和Hashtable主要区别
源代码查看,有三个常量, static final int DEFAULT_INITIAL_CAPACITY = 16; static final int MAXIMUM_CAPACITY = 1 & ...
- hbase region 分配方式
参与 Region 分配的重要对象 在 Region 分配过程中,起着重要作用有如下一些对象. HMaster— 是 HBase 中的 Master server ,仅有一个. HRegionServ ...
- [转]extern,static存储空间矛盾
其实,这两个语句的位置不同,会出现不同的解释.这主要是由于 static 具有的两重意义所导致的: (1) 如果 static int foo; 这一句位于函数中,则 static 表示的是存储属性, ...
- 实现DIV拖动
Ajax的到来让B/S中的客户端中开发有火了一把,网上出现了很多优秀的开源框架和UI,比较著名了有prototype,YUI,GWT等,但很多时候发现这些东西很难用到你的系统之中,有时候你的系统仅仅需 ...
- node学习笔记－搭建node环境
最近项目要用到node,利用空闲整理做下笔记 第一步 安装node,方式比较多,最为直接的是直接去官网 可直接从官网下载安装http://nodejs.cn/download/ 根据自己情况 ...
- dede 日期的所有格式
[field:pubdate function=strftime('%d',@me)/] 日 [field:pubdate function=strftime('%d日',@me)/] - [fiel ...
- Css 八卦
<div class="box"> <div class="right_d"></div> <span class=& ...
- 字符串匹配算法之Sunday算法
字符串匹配查找算法中,最着名的两个是KMP算法(Knuth-Morris-Pratt)和BM算法(Boyer-Moore).两个算法在最坏情况下均具有线性的查找时间.但是在实用上,KMP算法并不比最简 ...
- 文件头 MAGE_FILE_HEADER
IMAGE_FILE_HEADER这个结构的定义如下: typedef struct _IMAGE_FILE_HEADER { 00h WORD Machine; //运行平台 02h WORD Nu ...