使用fckeditor上传多张图片
流程:
1.使用fck上传图片到后台
2.后台上传图片到服务器端
3.服务器端返回上传信息
1.jsp页面
<script type="text/javascript">
$(function(){
var tObj;
$("#tabs a").each(function(){
if($(this).attr("class").indexOf("here") == 0){tObj = $(this)}
$(this).click(function(){
var c = $(this).attr("class");
if(c.indexOf("here") == 0){return;}
var ref = $(this).attr("ref");
var ref_t = tObj.attr("ref");
tObj.attr("class","nor");
$(this).attr("class","here");
$(ref_t).hide();
$(ref).show();
tObj = $(this);
if(ref == '#tab_2'){
var fck = new FCKeditor("productdesc");
fck.BasePath = "/res/fckeditor/";
fck.Config["ImageUploadURL"] = "/upload/uploadFck.do";
fck.Height = 400 ;
fck.ReplaceTextarea();
}
});
});
});
function uploadPic(){
var options={
url:"/upload/uploadPic.do",
dataType:"json",
type:"post",
success:function(data){
$("#product_url").attr("src",data.url);
$("#imgUrl").val(data.path);
}
};
$("#jvForm").ajaxSubmit(options);
}
</script>
<tbody id="tab_2" style="display: none">
<tr>
<td >
<textarea rows="10" cols="10" id="productdesc" name="description"></textarea>
</td>
</tr>
</tbody>
2.controller层
//异步上传没有返回值
@RequestMapping(value="/upload/uploadFck.do")
public void uploadFck(HttpServletRequest request, HttpServletResponse response){
MultipartHttpServletRequest ms = (MultipartHttpServletRequest) request;
Map<String, MultipartFile> filemap = ms.getFileMap();
Set<Entry<String,MultipartFile>> entrySet = filemap.entrySet();
for (Entry<String, MultipartFile> entry : entrySet) {
MultipartFile pic = entry.getValue();
Client client = new Client();
///图片生成策略
DateFormat df = new SimpleDateFormat("yyyyMMddHHmmssSSS");
String format = df.format(new Date());
Random r = new Random();
for(int i = 0;i<3; i++){
format += r.nextInt(10);
}
//得到文件扩张名
String ext = FilenameUtils.getExtension(pic.getOriginalFilename());
String path = "upload/"+format+"."+ext;
String url = "http://localhost:8088/image-web/"+path; //服务器路径
WebResource resource = client.resource(url);
try {
resource.put(String.class,pic.getBytes());
} catch (Exception e) {
e.printStackTrace();
}
UploadResponse ok = UploadResponse.getOK(url);//ok是个对象
try {
response.getWriter().print(ok); //使用print可以返回对象
//write 字符流
//print 字节流
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
} }
使用fckeditor上传多张图片的更多相关文章
- iOS -- 上传多张图片 后台(PHP)代码和上传一张的一样
// 上传多张图片 - (void)send { // 设置初始记录量为0 self.count = 0; self.upcount = 0; // 设置初始值为NO self.isUploadPic ...
- php用jquery-ajax上传多张图片限制图片大小
php用jquery-ajax上传多张图片限制图片大小 /** * 上传图片,默认大小限制为3M * @param String $fileInputName * @param number $siz ...
- 微信JSSDK上传多张图片
之前是使用for循环实现的,但是安卓手机没有问题,苹果手机只能上传最后一张图片. 好在有高手在前面趟路,实用的循环调用.苹果是没有,安卓不清楚.以下内容转自:http://leo108.com/pid ...
- 整理几个js上传多张图片的效果
一.普通的上传图片,张数不限制 <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"&g ...
- 如何在IPFS里面上传一张图片
之前有好几人问过小编,想在IPFS里面上传一张图片.如何做? 今天小编就讲一下如何在IPFS里面上传.下载文件? 1 下载IPFS软件 下载地址:https://dist.ipfs.io/#go-ip ...
- Ajax+PHP实现异步上传多张图片
Ajax+PHP实现异步上传多张图片 HTML代码 <!-- date: 2018-04-27 13:46:55 author: 王召波 descride: 多张图片上传 --> < ...
- 1) 上传多张图片时 ,对 $_FILES 的处理. upload ; 2)fileinput 上传多张图片. 3) 修改,删除的时候删除原来的资源,图片 update, delete , 删除 4)生成器中两个字段上传图片的时候,要修改生成器生成的代码
1上传多张图片, 要对 $_FILES进行 重新处理. //添加 public function addCourseAlbumAction() { $CourseAlbumModel = new Co ...
- Okhttp3上传多张图片同时传递参数
之前上传图片都是直接将图片转化为io流传给服务器,没有用框架传图片. 最近做项目,打算换个方法上传图片. Android发展到现在,Okhttp显得越来越重要,所以,这次我选择用Okhttp上传图片. ...
- POST请求上传多张图片并携带参数
POST请求上传多张图片并携带参数 在iOS中,用POST请求携带参数上传图片是非常恶心的事情,HTTPBody部分完全需要我们自己来配置,这个HTTPBody分为3个部分,头部分可以携带参数,中间部 ...
随机推荐
- error:hadoop 中没有etc目录
download binary 而不是 source http://hadoop.apache.org/#Download+Hadoop
- 温故而知新-robots.txt语法教程
用几个最常见的情况,直接举例说明: 1. 允许所有SE收录本站:robots.txt为空就可以,什么都不要写. 2. 禁止所有SE收录网站的某些目录: User-agent: * Disall ...
- svn2
ubuntu下安装subversion客户端: sudo apt-get install subversion subversion-tools 详细请看 http://www.subversion. ...
- django 之Paginator
Django自身提供了一些类来实现管理分页,数据被分在不同的页面中,并带有“上一页/下一页”标签.这个类叫做Pagination,其定义位于 django/core/paginator.py 中. p ...
- iOS多语言
https://blog.csdn.net/huangmindong/article/details/53464334 App多语言,字符串统一放在 Localizable.strings 文件里. ...
- treeMap 基于JDK 1.8的学习
困惑了很久的红黑树========来个了断吧 本文主要是为了描述旋转的原则,所以,至于红黑树的数据结构,红黑树的基本准则,不在强调,,红黑树困惑的就是这旋转的过程.!!! 画红黑树很简单的画图工具: ...
- Delphi 泛型详解
http://www.cnblogs.com/jxgxy/category/216671.html
- linux文本处理笔记
cut: 按列操作文本 sort: 排序 uniq: 去重,去除连续重复行 cut -d 'delimiter' -f start-end filename.txt # -d 表示分割符号,del ...
- intellij idea远程debug调试resin4教程
昨天有个项目部署在阿里云 想远程调试不知道怎么弄.看日志需要账户密码很不方便呀.今天加班特意baidu了下. 1.先在远程的resin修改conf中resin.xml配置文件 在server-defa ...
- Pronunciation – The Definitive Guide to the Top 100 Words in American English
Pronunciation – The Definitive Guide to the Top 100 Words in American English Share Tweet Share Tagg ...