流程:

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上传多张图片的更多相关文章

  1. iOS -- 上传多张图片 后台(PHP)代码和上传一张的一样

    // 上传多张图片 - (void)send { // 设置初始记录量为0 self.count = 0; self.upcount = 0; // 设置初始值为NO self.isUploadPic ...

  2. php用jquery-ajax上传多张图片限制图片大小

    php用jquery-ajax上传多张图片限制图片大小 /** * 上传图片,默认大小限制为3M * @param String $fileInputName * @param number $siz ...

  3. 微信JSSDK上传多张图片

    之前是使用for循环实现的,但是安卓手机没有问题,苹果手机只能上传最后一张图片. 好在有高手在前面趟路,实用的循环调用.苹果是没有,安卓不清楚.以下内容转自:http://leo108.com/pid ...

  4. 整理几个js上传多张图片的效果

    一.普通的上传图片,张数不限制 <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"&g ...

  5. 如何在IPFS里面上传一张图片

    之前有好几人问过小编,想在IPFS里面上传一张图片.如何做? 今天小编就讲一下如何在IPFS里面上传.下载文件? 1 下载IPFS软件 下载地址:https://dist.ipfs.io/#go-ip ...

  6. Ajax+PHP实现异步上传多张图片

    Ajax+PHP实现异步上传多张图片 HTML代码 <!-- date: 2018-04-27 13:46:55 author: 王召波 descride: 多张图片上传 --> < ...

  7. 1) 上传多张图片时 ,对 $_FILES 的处理. upload ; 2)fileinput 上传多张图片. 3) 修改,删除的时候删除原来的资源,图片 update, delete , 删除 4)生成器中两个字段上传图片的时候,要修改生成器生成的代码

    1上传多张图片, 要对 $_FILES进行 重新处理. //添加 public function addCourseAlbumAction() { $CourseAlbumModel = new Co ...

  8. Okhttp3上传多张图片同时传递参数

    之前上传图片都是直接将图片转化为io流传给服务器,没有用框架传图片. 最近做项目,打算换个方法上传图片. Android发展到现在,Okhttp显得越来越重要,所以,这次我选择用Okhttp上传图片. ...

  9. POST请求上传多张图片并携带参数

    POST请求上传多张图片并携带参数 在iOS中,用POST请求携带参数上传图片是非常恶心的事情,HTTPBody部分完全需要我们自己来配置,这个HTTPBody分为3个部分,头部分可以携带参数,中间部 ...

随机推荐

  1. SLD Related Gateway Serivces Unavaliable

    SAP NW 7.4 default switched on the ACL (access control list) in gateway service, so only local acces ...

  2. 写一个小demo过程中遇到的各种问题 学生管理考勤系统(网页模拟)

    添加与新增一些小玩意的1.0.3版本:传送门 各位带哥,这不是你们要的c++.java.c#作业哈 课上要求做个小作业,学生管理考勤系统,原本想着是个练手的好机会,结果只证实了我还是个弟中弟. 设想的 ...

  3. twisted reactor执行流程

    #reactorbase的主循环 def mainLoop(self): while self._started: try: while self._started: # Advance simula ...

  4. leetcode1003

    class Solution: def isValid(self, S: str) -> bool: n = len(S) if n % 3 != 0: return False while n ...

  5. Vue.js——基于$.ajax实现数据的跨域增删查改

    转自:https://www.cnblogs.com/keepfool/p/5648674.html 概述 之前我们学习了Vue.js的一些基础知识,以及如何开发一个组件,然而那些示例的数据都是loc ...

  6. delphi’线程新技术 并行计算

    TParallel TInterLocked 并行库中的TTask http://docwiki.embarcadero.com/Libraries/Berlin/en/System.Threadin ...

  7. CSS多行文字垂直居中的两种方法

    之前写过一篇关于:CSS左右居中对齐的文章,里面提到的两种方法其实也可以引申为垂直居中对齐.写这篇文章是因为要兼容IE6.IE7的问题,我们都知道一行文字时可以通过line-height来设置垂直居中 ...

  8. NetBeans 8以后版本无法连接git服务器

    因为目前的git服务器的密钥加密基本都是256位的,而NetBeans带的jre环境的加密限制在基本的128位加密,从而导致无法和git服务器通信 解决办法 下载Java Cryptography E ...

  9. spring异常

    1.The type org.springframework.core.NestedRuntimeException cannot be resolved. It is indirectly refe ...

  10. ABAP-2-会计凭证批量数据导入本地ACCESS

    ABAP-1-会计凭证批量数据导入本地ACCESS 上一版本出现问题: A.若TXT数据条目超过800万(大概1.3G),则将TXT导入ACCESS过程不成功,ACCESS数据表为空.(Access单 ...