参考: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. CentOS6 安装VNCserver

    1.下载vncserver yum install tigervnc tigervnc-server -y 2.配置 vncserver vi /etc/sysconfig/vncserver 在文件 ...

  2. su和sudo的使用

    用于用户身份切换 一.su 命令形式 代表内容 su 切换为root,以non-login shell的方式 su - 切换为root,以login shell的方式 su -l 账号 切换为“账号” ...

  3. Thunder团队第二周 - Scrum会议5

    Scrum会议5 小组名称:Thunder 项目名称:爱阅app Scrum Master:苗威 工作照片: 参会成员: 王航:http://www.cnblogs.com/wangh013/ 李传康 ...

  4. Python学习之路4 - 文件操作&编码转换

    文件操作 文件操作大概分三步: 把文件打开. 操作文件. 把文件关上. 打开文件 打开文件用open()函数,打开成功后返回一个资源,具体语法如下. open(要打开的文件,打开方式,打开文件的格式, ...

  5. html+css基础 - 个人备忘录

    //======================html部分===================// 表现内容<meta http-equiv="Content-Type" ...

  6. 20172332 实验一《Java开发环境的熟悉》实验报告

    20172332 2017-2018-2 <程序设计与数据结构>实验一报告 课程:<程序设计与数据结构> 班级: 1723 姓名: 于欣月 学号:20172332 实验教师:王 ...

  7. 安装Tensorflow过程pip安装报错:is not a supported wheel on this platform

    安装Tensorflow过程pip安装报错:is not a supported wheel on this platform 通过pip安装wheel镜像时,安装指令为: pip install - ...

  8. Alpha 冲刺3

    队名:日不落战队 安琪(队长) 今天完成的任务 组织第三次站立式会议. 完成了个人信息前端界面. 明天的计划 草稿箱前端界面. 个人信息扩展界面框架. 还剩下的任务 回收站前端界面. 信息修改前端界面 ...

  9. TCP系列01—概述及协议头格式

    一.TCP简单介绍 我们经常听人说TCP是一个面向连接的(connection-oriented).可靠的(reliable).字节流式(byte stream)传输协议,  TCP的这三个特性该怎么 ...

  10. 修改MSSQL字段类型

    update Data_Project set SyncTime=NULL; alter table Data_Project alter column SyncTime datetime; upda ...