2019独角兽企业重金招聘Python工程师标准>>>

做项目是需要将本地图片上传到服务器,可是tiny_mce自带的image插件不能很好的实现, tiny_mce需要动的输入图片地址,这个地址还得是服务器上的地址。所以不满足需要,需要改进。

通常的办法就是使用ajax把图片提交到服务器,然后返回图片在服务器上的地址,然后再把返回的地址写到地址栏里,这就ok了。

下面给出我写的代码:

如果你不懂ajaxfileupload请看http://www.phpletter.com/Our-Projects/AjaxFileUpload/

jsp页面:需要引入jquery.js 和ajaxfileupload.js,注意jquery.js需要放在前面,如果放在后面的话,不会执行下面的方法。

<script type="text/javascript" src="../../../js/jquery.js"></script><script type="text/javascript" src="../../utils/ajaxfileupload.js"></script>
<script  type="text/javascript">function uploadFiles() {$.ajaxFileUpload({           url:'http://localhost:8080/fangdo/admin/uploadPhoto.action',        secureuri:false,fileElementId:'file',dataType: 'json',success: function (result, statu) {    if (result.status == 'success'){$("#src").val(result.src);ImageDialog.showPreviewImage(result.src);}else {alert(result.status);}},error: function (result, status, e) {    alert(e);}})}
</script>
<tr><td><a href="#" onClick="uploadFiles();"><script>document.write('\文件上传')</script></a></td>                          <td><input style="WIDTH: 250" id="file" name="file" type="file"></td>
</tr>

action中的方法:

// photo uploadpublic void uploadPhoto() throws ActionException {String realDir = getSession().getServletContext().getRealPath("");HttpServletRequest request = ServletActionContext.getRequest();String contextpath = request.getContextPath();String basePath = request.getScheme() + "://" + request.getServerName()+ ":" + request.getServerPort() + contextpath + "/";String status = "error";try {String filePath = "uploads";String imagePath = "image" ;String realPath = realDir + "\\" + filePath+"\\"+imagePath;// 判断路径是否存在,不存在则创建File dir = new File(realPath);if (!dir.isDirectory())dir.mkdir();Check that we have a file upload requestif (ServletFileUpload.isMultipartContent(request)) {//为什么要判断看后面注                 DiskFileItemFactory dff = new DiskFileItemFactory();dff.setRepository(dir);dff.setSizeThreshold(1024000);Create a new file upload handlerServletFileUpload servletFileUpload = new ServletFileUpload(dff);FileItemIterator fileItemIterator = null;// Parse the requestservletFileUpload.setHeaderEncoding("UTF-8"); // 设置编码,因为我的jsp页面的编码是utf-8的fileItemIterator = servletFileUpload.getItemIterator(request);String tilte = "";// 标题String url = "";String fileName = "";String realFileName = "";while (fileItemIterator.hasNext()) {FileItemStream fis = fileItemIterator.next();try {if (!fis.isFormField() && fis.getName().length() > 0) {fileName = fis.getName();Pattern reg = Pattern.compile("[.]jpg|png|jpeg|gif$");Matcher matcher = reg.matcher(fileName);if (!matcher.find()) {status = "文件格式不对";break;}realFileName = new Date().getTime()+ fileName.substring(fileName.lastIndexOf("."),fileName.length());url = realPath + "\\" + realFileName;BufferedInputStream in = new BufferedInputStream(fis.openStream());FileOutputStream fous = new FileOutputStream(new File(url));BufferedOutputStream out = new BufferedOutputStream(fous);Streams.copy(in, out, true);status="success";} /*else {String fname = fis.getFieldName();if (fname.indexOf("pictitle") != -1) {BufferedInputStream in = new BufferedInputStream(fis.openStream());byte c[] = new byte[10];int n = 0;while ((n = in.read()) != -1) {tilte = new String(c, 0, n);break;}}}
*/} catch (IOException e) {e.printStackTrace();}}HttpServletResponse respone = ServletActionContext.getResponse();respone.setContentType("text/html");respone.setCharacterEncoding("UTF-8");respone.setStatus(200);String retxt = "{src:'" +  contextpath +"/"+ filePath + "/"+imagePath+"/"+ realFileName + "',status:'"+status+"'}";respone.getWriter().print(retxt);}} catch (Exception e) {e.printStackTrace();}}

配置文件:

<action name="uploadPhoto" class="com.fangdo.action.CmsTitleAction" method="uploadPhoto"></action>

注:1、检查request是否是一个上传请求

// Check that we have a file upload request
boolean isMultipart = ServletFileUpload.isMultipartContent(request);

静态方法isMultipartContent代码:就是判断contentType是否是multipart/

这就是为什么form类型要设成multipart/form-data吧

public static final boolean isMultipartContent(HttpServletRequest request) {if (!"post".equals(request.getMethod().toLowerCase())) {return false;}String contentType = request.getContentType();if (contentType == null) {return false;}if (contentType.toLowerCase().startsWith(MULTIPART)) {return true;}return false;}
public static final String MULTIPART = "multipart/";

转载于:https://my.oschina.net/winHerson/blog/50530

tiny_mce的本地图片上传插件相关推荐

  1. Gitee+typora+picgo+插件,markdown图床配置,一键将markdown中本地图片上传至图床

    一键将markdown中本地图片上传至图床 推荐配置:Gitee+typora+picgo+插件 文章目录 安装 picgo 配置 typora 配置 Gitee 图床 配置图床设置 配置 typor ...

  2. kindeditor java 上传图片_java中KindEditor本地图片上传与上传失败问题

    此代码是最新版的 KindEditor 3.5.x 实现本地图片上传的方法,用于oschina即将改版的个人空间 KindEditor 要求的JSON格式如下: {"error": ...

  3. JS兼容各个浏览器的本地图片上传即时预览效果

    JS兼容各个浏览器的本地图片上传即时预览效果 很早以前 在工作曾经碰到这么一个需求,当时也是纠结了很久,也是google了很久,没有碰到合适的demo,今天特意研究了下这方面的的问题,所以也就做了个简 ...

  4. Typora本地图片上传

    Typora本地图片上传 方法一:使用有道云笔记(我用不了...) 根据在网上看到的一些方法,他们说可以用有道云笔记上传 图片后粘贴地址实现本地图片的上传. 步骤如下: 打开有道云笔记网页版 点击&q ...

  5. think php上传图片,基于ThinkPHP5.0实现图片上传插件

    这篇文章主要介绍了关于基于ThinkPHP5.0实现图片上传插件,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 thinkphp5.0 图片上传插件可预览裁剪图片和保存原图片,执行裁剪 ...

  6. WebUploader文件图片上传插件的使用

    最近在项目中用到了百度的文件图片上传插件WebUploader.分享给大家 需要在http://fex.baidu.com/webuploader/download.html点击打开链接下载WebUp ...

  7. jquery.photoClip.js图片上传插件带拖动裁剪

    下载地址 jquery.photoClip.js是一款图片上传插件,可以拖动选择裁剪的区域. dd:

  8. php 上传图片控件,ThinkPHP5.0实现图片上传插件实例分享

    thinkphp5.0 图片上传插件可预览裁剪图片和保存原图片,执行裁剪图片后会删除 裁剪的原图片目录,以便减少空间.具体实现代码大家参考下本文,希望能帮助到大家. 效果预览图: 该插件主要功能是:可 ...

  9. 本地图片上传与H5适配知识

    最近用到本地图片上传作为API的参数,在网上看了许多,记录一下,以后可能用的着(仅自己记录用,看不清请绕路) function getObjectURL(file) { var url = null ...

  10. html 头像选择,html5点击上传头像选取本地图片上传代码

    特效描述:html5 点击上传头像 选取本地图片 上传代码.html5点击上传头像,图片上传代码 代码结构 1. HTML代码 上传头像 //获取上传按钮 var input1 = document. ...

最新文章

  1. 为何出现Error Loading Midas.dll消息?
  2. HDU-4081 Qin Shi Huang's Road 8ystem(次小生成树)
  3. Windows下怎样安装Tomcat
  4. 【POJ - 3211】Washing Clothes (dp,0-1背包中点问题)
  5. java 使用jar_Java 使用JAR文件
  6. Unity3D下Linux平台播放RTSP或RTMP流
  7. Win10+VSCode搭建opencv+C++环境(2)
  8. c#: Newtonsoft.Json 高级用法二(jsonpath)
  9. Unity中物体移动脚本
  10. JavaWeb_CSS(14)_文字处理_字体和字号
  11. control c linux命令,linux中Control+C是什么指令?使用什么命令可以给一个进程发出一个这样的指令?...
  12. Android 官方现代 App 架构指南
  13. 太阳诱电 | 汽车用金属功率电感器MCOIL™ LCEN 系列实现商品化
  14. SSM毕设项目仓库管理系统lyf55(java+VUE+Mybatis+Maven+Mysql)
  15. 强大的嗅探工具--ettercap
  16. 大学本科毕业论文查重有什么要求?
  17. 详细介绍知识图谱技术
  18. 一、ECMAScript 6/7/8简介
  19. Logstash学习
  20. 破解智慧零售密码 苏宁易购818引爆全民消费狂欢

热门文章

  1. Asp.Net MVC 控制器
  2. LA 6047Perfect Matching(回文串哈希)
  3. HDU6380 degree
  4. DjangoForm 之创建FORM模板进行验证
  5. 【HDU 6031]】 Innumerable Ancestors
  6. linux vsftpd
  7. IT项目经验和难点分享
  8. Centos 进入单入口模式
  9. linux命令及实例说明一:cd、ls、rmdir、rm、mkdir
  10. css 注释写法注意事项