uploadify图片上传配置
参考:http://www.cnblogs.com/XuebinDing/archive/2012/04/26/2470995.html
官网地址:http://www.uploadify.com/
附件下载地址:http://files.cnblogs.com/files/miskis/uploadify.zip
引用js、css
<link rel="stylesheet" href="/assets/uploadify/uploadify.css">
<link rel="stylesheet" href="/assets/css/iconfont.css"> <script src="/assets/jquery-1.11.1.min.js"></script>
<script src="/assets/uploadify/jquery.uploadify.js" ></script>
<script src="/assets/uploadify/jquery.uploadify.defaultOpt.js" ></script>
html
<div id="js_showImgs" ></div>
<input type="file" name="uploadify" id="uploadify" />
js代码
$("#uploadify").uploadify($.extend(true,defaultOptions,{
uploader: 'http://172.16.81.52:7080/web/file/uploadImage', // 服务器处理地址
swf: '/assets/uploadify/uploadify.swf',
buttonText: "选择文件", //按钮文字
height: 34, //按钮高度
width: 82, //按钮宽度
fileTypeExts: "*.jpg;*.png;", //允许的文件类型
fileTypeDesc: "请选择图片文件", //文件说明
formData: { "imageFile": "imageFile" }, //提交给服务器端的参数
fileObjName: 'imageFile',
fileSizeLimit: '2MB', //文件大小,它接受一个单位(B,KB,MB或GB)。默认单位为KB。你可以设置这个值为0表示不限制。
uploadLimit: 1,//图片张数限制
onUploadSuccess: function (file, data, response) { //一个文件上传成功后的响应事件处理
var fileData = $.parseJSON(data);
//组装图片地址
var imgurl="http://172.16.81.52:81/"+ fileData.data.originalUrl;
AddImage(imgurl,"uploadify-img","js_showImgs",0);
}
})); /*********************
* 图片预览
* imgUrl 图片路径
* imgName 图片隐藏域id
* renderTo 图片预览追加位置id
* index 用于多图片时修改div的class
**********************/
window.AddImage=function(imgUrl, imgName, renderTo, index){
index++;
var imgItem = '<div class="album-image album-image'+index+'" >' +
' <div style="height:120px;">' +
' <input type="hidden" id="'+imgName+'" value="' + imgUrl + '"/>' +
' <img src="' + imgUrl + '" >' +
' </div>' +
' <div class="album-tools" title="删除图片">' +
' <span class="image-options text-right">' +
' <i class="icon iconfont icon-shanchu" ></i>' +
' </span>' +
' <div class="clearfix"></div>'+
' </div>' +
' </div>';
$("#"+renderTo).append(imgItem);
//移除预览图片
$("#"+renderTo).find(".album-tools").click(function(){
//获取上传文件的属性
var data = $('#uploadify').data('uploadify');
var settings = data.settings;
//获取当前设置的上传文件数限制
var uploadLimit=settings.uploadLimit;
//重置上传限制
$('#uploadify').uploadify('settings','uploadLimit', ++uploadLimit);
//移除图片元素
$("#"+renderTo).find(".album-image"+index+"").remove();
})
}
uploadify图片上传配置的更多相关文章
- asp.net 百度编辑器 UEditor 上传图片 图片上传配置 编辑器配置 网络连接错误,请检查配置后重试
1.配置ueditor/editor_config.js文件,将 //图片上传配置区 ,imageUrl:URL+"net/imageUp.ashx" //图片上传提交地址 ,im ...
- uploadify图片上传发生Security Error
今天在使用uploadify进行图片上传的时候出现security error.其根本原因是flash跨域问题.主要原因是因为配了两个域名www.ttyouni.com 和 ttyouni.com 在 ...
- ueditor图片上传配置
ueditor图片上传配置文件为ueditor/php/config.json /* 上传图片配置项 */ "imageActionName": "uploadimage ...
- kindeditor在Java项目中的应用以及图片上传配置
在官网下载Kindededitor的开发包 在项目中javaweb项目中导入kindeditor必须要使用的Jar包(用于文件上传,除非你的富文本编辑器不使用图片上传)jar包可以在官网的开发包中 ...
- .net_ckeditor+ckfinder的图片上传配置
CKEditor和CKFinder的最新版可以到官方网站(http://cksource.com)上下载获得. 把以上两个资源放到网站的根目录: /CKEditor 和 /CKFinder (不区分大 ...
- uploadify 图片上传
遇到的问题总结: 1.//图片排序 $("#pics").sortable(); 2.//上传的文件对象名,与后台所传参数名保持一致,最初因为这个名称错误浪费了许久时间 fileO ...
- 关于UEditor的使用配置(图片上传配置)
接到新需求,需要在平台上使用富文本编辑器,我这次选择了百度的UEditor 在官网上下载l.net版本的1.4.3开发版本 http://ueditor.baidu.com/website/downl ...
- ckeditor4.7配置图片上传
ckeditor作为老牌的优秀在线编辑器,一直受到开发者的青睐. 这里我们讲解下 ckeditor最新版本4.7的图片上传配置. https://ckeditor.com/ 官方 进入下载 https ...
- [Asp.net core 2.0]Ueditor 图片上传
摘要 在项目中要用到富文本编辑器,包含上传图片,插入视频等功能.但ueditor只有.net版本,没有支持core.那么上传等接口就需要自己实现了. 一个例子 首先去百度ueditor官网下载简化版的 ...
随机推荐
- Alpha发布-----欢迎来怼团队
欢迎来怼项目小组—Alpha发布展示 一.小组成员 队长:田继平 成员:葛美义,王伟东,姜珊,邵朔,冉华 ,李圆圆 二.文案+美工展示 链接:http://www.cnblogs.com/wwd199 ...
- Python学习之路1 - 基础入门
本文内容 Python介绍 安装Python解释器 输出 变量 输入 条件判断语句 循环语句 模块讲解 三元运算 字符串和二进制的相互转化 本系列文章使用的Python版本为3.6.2 使用开发工具为 ...
- 什么是BCL
原文: 原文:https://www.cnblogs.com/1996V/p/9037603.html 什么是BCL 当你通过VS创建一个项目后,你这个项目就已经引用好了通过.NET下的语言编写好的一 ...
- 《C陷阱与缺陷》之1词法"陷阱"
编译器中负责将程序分解为一个一个符号的部分,一般称为"词法分析器".在C语言中,符号之间的空白(包括空格符.制表符或换行符)将被忽略. 1.=不同于== C语言使用符号" ...
- Windows 7中安装Solr7
最新忙里偷闲,研究一下了Lucene.Net,发现操作比较繁琐,同比相似的功能,感觉Solr比较简单,容易使用.不过由于Solr使用的是Java的环境,对于.Net开发的人员来说,还是比较陌生,搭配环 ...
- DataSet和List 泛型之间互相转换 (转载)
//DataSet与泛型集合间的互相转换 //利用反射机制将DataTable的字段与自定义类型的公开属性互相赋值. //注意:从DataSet到IList<T>的转换,自定义类型的公开属 ...
- 解决ueditor编辑器图片在线管理图片无法显示
使用ueditor,点击在线管理,服务器图片路径显示不正确,如下图所示 查看源码,如下: 发现图片src中中间多了一长串的项目跟路径,解决的办法是 把 jsp/controller.jsp 里面 ...
- 第五部分shell项目一监控脚本
需求: 使用shell定制各种个性化告警工具,但需要统一化管理.规范化管理. 思路:指定一个脚本包,包含主程序.子程序.配置文件.邮件引擎.输出日志等.主程序:作为整个脚本的入口,是整个系统的命脉.配 ...
- 基于c++和opencv底层的图像旋转
图像旋转:本质上是对旋转后的图片中的每个像素计算在原图的位置. 在opencv包里有自带的旋转函数,当你知道倾斜角度theta时: 用getRotationMatrix2D可得2X3的旋转变换矩阵 M ...
- shit antd & Merry Christmas bug
shit antd & Merry Christmas bug https://github.com/ant-design/ant-design/issues/13098 antd 玩大了? ...