使用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个部分,头部分可以携带参数,中间部 ...
随机推荐
- 浏览器Hack演示
<!doctype html> <html> <head> <title></title> <meta http-equiv=&quo ...
- 23.1纯 CSS 创作一个菜单反色填充特效
交互效果地址:https://scrimba.com/c/cEwREJs6 HTML代码: <nav> <ul> <li><span>Home</ ...
- pycharm中查找替换妙用
1.二行空格变一行(转载https://www.cnblogs.com/dreamfine/p/7760575.html) 网上COPY的代码,经常多出一个空行,不用一行行删除了,用替换功能吧,查找 ...
- python 3.4 error: Microsoft Visual C++ 10.0 is required(Unable to find vcvarsall.bat)
一些小技巧 我是在windows 64下安装的python3.4 Python 我在安装theano时报这个错,网上找了不少资料.自己摸索着解决了. 你先打开dos界面.我用set命令查看一下: 发现 ...
- 【Linux】CentOS7 安装,遇到的各种问题,并修复win7启动项
https://www.cnblogs.com/sxdcgaq8080/p/7457255.html ------------------------------------------------- ...
- Hadoop 3.0 安装
1. 下载Hadoop 3.0 http://mirrors.tuna.tsinghua.edu.cn/apache/hadoop/common/hadoop-3.0.0/hadoop-3. ...
- 浅谈 REST 和 RESTFul API
RESTFul API的特点: 基于“资源”,数据也好.服务也好,在RESTFul设计里一切都是资源. 无状态.一次调用一般就会返回结果,所有的资源,都可以通过URI定位 URL中通常不出现动词,只有 ...
- Linux 目录栈及目录切换
使用 cd - (中杠)会切换到上一次的目录 cd 命令会改变目录栈 1.dirs 1)功能显示当前目录栈中的所有记录(不带参数的dirs命令显示当前目录栈中的记录) 2)语法(1)格式:dirs ...
- java byte[]与十六进制字符串相互转换
http://blog.csdn.net/worm0527/article/details/69939307 http://blog.csdn.net/androiddeveloper_lee/art ...
- 爬虫--requests模块高级(代理和cookie操作)
代理和cookie操作 一.基于requests模块的cookie操作 引言:有些时候,我们在使用爬虫程序去爬取一些用户相关信息的数据(爬取张三“人人网”个人主页数据)时,如果使用之前requests ...