参考: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图片上传配置的更多相关文章

  1. asp.net 百度编辑器 UEditor 上传图片 图片上传配置 编辑器配置 网络连接错误,请检查配置后重试

    1.配置ueditor/editor_config.js文件,将 //图片上传配置区 ,imageUrl:URL+"net/imageUp.ashx" //图片上传提交地址 ,im ...

  2. uploadify图片上传发生Security Error

    今天在使用uploadify进行图片上传的时候出现security error.其根本原因是flash跨域问题.主要原因是因为配了两个域名www.ttyouni.com 和 ttyouni.com 在 ...

  3. ueditor图片上传配置

    ueditor图片上传配置文件为ueditor/php/config.json /* 上传图片配置项 */ "imageActionName": "uploadimage ...

  4. kindeditor在Java项目中的应用以及图片上传配置

    在官网下载Kindededitor的开发包   在项目中javaweb项目中导入kindeditor必须要使用的Jar包(用于文件上传,除非你的富文本编辑器不使用图片上传)jar包可以在官网的开发包中 ...

  5. .net_ckeditor+ckfinder的图片上传配置

    CKEditor和CKFinder的最新版可以到官方网站(http://cksource.com)上下载获得. 把以上两个资源放到网站的根目录: /CKEditor 和 /CKFinder (不区分大 ...

  6. uploadify 图片上传

    遇到的问题总结: 1.//图片排序 $("#pics").sortable(); 2.//上传的文件对象名,与后台所传参数名保持一致,最初因为这个名称错误浪费了许久时间 fileO ...

  7. 关于UEditor的使用配置(图片上传配置)

    接到新需求,需要在平台上使用富文本编辑器,我这次选择了百度的UEditor 在官网上下载l.net版本的1.4.3开发版本 http://ueditor.baidu.com/website/downl ...

  8. ckeditor4.7配置图片上传

    ckeditor作为老牌的优秀在线编辑器,一直受到开发者的青睐. 这里我们讲解下 ckeditor最新版本4.7的图片上传配置. https://ckeditor.com/ 官方 进入下载 https ...

  9. [Asp.net core 2.0]Ueditor 图片上传

    摘要 在项目中要用到富文本编辑器,包含上传图片,插入视频等功能.但ueditor只有.net版本,没有支持core.那么上传等接口就需要自己实现了. 一个例子 首先去百度ueditor官网下载简化版的 ...

随机推荐

  1. Alpha发布-----欢迎来怼团队

    欢迎来怼项目小组—Alpha发布展示 一.小组成员 队长:田继平 成员:葛美义,王伟东,姜珊,邵朔,冉华 ,李圆圆 二.文案+美工展示 链接:http://www.cnblogs.com/wwd199 ...

  2. Python学习之路1 - 基础入门

    本文内容 Python介绍 安装Python解释器 输出 变量 输入 条件判断语句 循环语句 模块讲解 三元运算 字符串和二进制的相互转化 本系列文章使用的Python版本为3.6.2 使用开发工具为 ...

  3. 什么是BCL

    原文: 原文:https://www.cnblogs.com/1996V/p/9037603.html 什么是BCL 当你通过VS创建一个项目后,你这个项目就已经引用好了通过.NET下的语言编写好的一 ...

  4. 《C陷阱与缺陷》之1词法"陷阱"

    编译器中负责将程序分解为一个一个符号的部分,一般称为"词法分析器".在C语言中,符号之间的空白(包括空格符.制表符或换行符)将被忽略. 1.=不同于== C语言使用符号" ...

  5. Windows 7中安装Solr7

    最新忙里偷闲,研究一下了Lucene.Net,发现操作比较繁琐,同比相似的功能,感觉Solr比较简单,容易使用.不过由于Solr使用的是Java的环境,对于.Net开发的人员来说,还是比较陌生,搭配环 ...

  6. DataSet和List 泛型之间互相转换 (转载)

    //DataSet与泛型集合间的互相转换 //利用反射机制将DataTable的字段与自定义类型的公开属性互相赋值. //注意:从DataSet到IList<T>的转换,自定义类型的公开属 ...

  7. 解决ueditor编辑器图片在线管理图片无法显示

    使用ueditor,点击在线管理,服务器图片路径显示不正确,如下图所示  查看源码,如下:  发现图片src中中间多了一长串的项目跟路径,解决的办法是 把  jsp/controller.jsp 里面 ...

  8. 第五部分shell项目一监控脚本

    需求: 使用shell定制各种个性化告警工具,但需要统一化管理.规范化管理. 思路:指定一个脚本包,包含主程序.子程序.配置文件.邮件引擎.输出日志等.主程序:作为整个脚本的入口,是整个系统的命脉.配 ...

  9. 基于c++和opencv底层的图像旋转

    图像旋转:本质上是对旋转后的图片中的每个像素计算在原图的位置. 在opencv包里有自带的旋转函数,当你知道倾斜角度theta时: 用getRotationMatrix2D可得2X3的旋转变换矩阵 M ...

  10. shit antd & Merry Christmas bug

    shit antd & Merry Christmas bug https://github.com/ant-design/ant-design/issues/13098 antd 玩大了? ...