首先是后台要有一个上传图片的工具类：

[java] view plaincopy
  1. package utils;
  2. import java.io.File;
  3. import org.apache.commons.lang.StringUtils;
  4. import play.Logger;
  5. import play.Play;
  6. import com.google.gson.Gson;
  7. import com.ning.http.client.AsyncHttpClient;
  8. import com.ning.http.client.Response;
  9. import com.ning.http.multipart.FilePart;
  10. import com.ning.http.multipart.StringPart;
  11. public class PictureUploadUtils {
  12. public static String PICTURE_SERVER = Play.configuration.getProperty(
  13. "pic.host", "http://oss.iclass.cn/form");
  14. public static String PICTURE_SERVER_BASEURL = "http://oss.iclass.cn/smallfiles";
  15. private class Result {
  16. public boolean succ;
  17. public String html;
  18. }
  19. public class InfoResult {
  20. public int width;
  21. public int height;
  22. }
  23. public static String getUrlFromServer(File file) {
  24. final AsyncHttpClient client = new AsyncHttpClient();
  25. try {
  26. final Response response = client.preparePost(PICTURE_SERVER)
  27. .addBodyPart(new FilePart("qqfile", file))
  28. .addBodyPart(new StringPart("bucketName", "smallfiles"))
  29. .addBodyPart(new StringPart("source", "WEB")).execute()
  30. .get();
  31. final String responseBody = response.getResponseBody("utf8");
  32. if (responseBody == null) {
  33. Logger.error("[EndServer has not started.]");
  34. } else {
  35. Result result = new Gson().fromJson(responseBody, Result.class);
  36. return result.html;
  37. }
  38. } catch (Exception e) {
  39. Logger.error(e, e.getMessage());
  40. } finally {
  41. client.close();
  42. }
  43. return "";
  44. }
  45. public static InfoResult getInfoFromServer(String url) {
  46. final AsyncHttpClient client = new AsyncHttpClient();
  47. try {
  48. final Response response = client.prepareGet(url + "/info")
  49. .execute().get();
  50. final String responseBody = response.getResponseBody("utf8");
  51. if (responseBody == null) {
  52. Logger.error("[EndServer has not started.]");
  53. } else {
  54. return new Gson().fromJson(responseBody, InfoResult.class);
  55. }
  56. } catch (Exception e) {
  57. Logger.error(e, e.getMessage());
  58. } finally {
  59. client.close();
  60. }
  61. return null;
  62. }
  63. public enum Effect {
  64. PURE {// 原图
  65. @Override
  66. public String toString() {
  67. return "";
  68. }
  69. },
  70. FILL {// 填充
  71. @Override
  72. public String toString() {
  73. return "f";
  74. }
  75. },
  76. CUT {// 裁剪
  77. @Override
  78. public String toString() {
  79. return "c";
  80. }
  81. };
  82. @Override
  83. abstract public String toString();
  84. }
  85. public static boolean isFromPicServer(String picUrl) {
  86. return StringUtils.startsWithIgnoreCase(picUrl, PICTURE_SERVER_BASEURL);
  87. }
  88. /**
  89. * @author xz8885 获取指定大小图片的方法，当宽或高为零时为零的维度会等比缩放，均为0则返回原始图片
  90. *
  91. * @param width
  92. * @param height
  93. * @param defaultUrl
  94. * @return 图片url
  95. */
  96. public static String getPictureFromPicServer(int width, int height,
  97. Effect effect, String defaultUrl) {
  98. if (!isFromPicServer(defaultUrl)) {
  99. return defaultUrl;
  100. }
  101. String fileName = StringUtils.substringAfterLast(defaultUrl, "/");
  102. effect = effect == null ? Effect.PURE : effect;
  103. return PICTURE_SERVER_BASEURL + "/" + width + "_" + height
  104. + effect.toString() + "/" + fileName;
  105. }
  106. }

一、使用ajax上传

js代码如下：

[javascript] view plaincopy
  1. var upload = $("#uploadInput");
  2. $("#uploadImg").click(function(){
  3. <span style="white-space:pre">    </span>if($("#picNum").html()<5){
  4. upload.click();
  5. }else{
  6. alert( '已达到可上传图片数量上限');
  7. return;
  8. }
  9. });
  10. upload.change( function(){
  11. var formData = new FormData($("#uploadForm")[0]);
  12. $.ajax({
  13. <span style="white-space:pre">    </span> url: '/assist/upload',
  14. type: 'POST',
  15. data: formData,
  16. async: false,
  17. cache: false,
  18. contentType: false,
  19. processData: false,
  20. success: function (json) {
  21. <span style="white-space:pre">    </span>var url=json.data;
  22. <span style="white-space:pre">    </span>var str = '<li class="pic"><img src="'+url+'"><span class="pic-bg"></span><a href="javascript:;" class="picDelete pic-del">×</a></li>'
  23. <span style="white-space:pre">    </span>$("#uploadImg").parent().before(str);
  24. <span style="white-space:pre">    </span>$("#uploadInput").val("");
  25. <span style="white-space:pre">    </span>var num=Number($("#picNum").html())+1;
  26. <span style="white-space:pre">    </span>$("#picNum").html(num);
  27. <span style="white-space:pre">    </span> },
  28. error: function (json) {
  29. alert(json);
  30. }
  31. });
  32. });

对应的controller中方法：

[java] view plaincopy
  1. public static void upload(File file, String fileType) {
  2. String url = "";
  3. String pathname = file.getAbsolutePath().replaceAll(" ", "_");
  4. File newFile = new File(pathname);
  5. file.renameTo(newFile);
  6. url = PictureUploadUtils.getUrlFromServer(newFile);
  7. }

二、使用upload.js上传

upload.js 代码：

[javascript] view plaincopy
  1. /**
  2. * jQuery upload v1.2
  3. * http://www.ponxu.com
  4. *
  5. * @author xwz
  6. */
  7. (function($) {
  8. var noop = function(){ return true; };
  9. var frameCount = 0;
  10. var uploadDefault = {
  11. url: '',
  12. fileName: 'filedata',
  13. dataType: 'json',
  14. params: {},
  15. onSend: noop,
  16. onComplate: noop
  17. };
  18. $.upload = function(options) {
  19. var opts = $.extend(uploadDefault, options);
  20. if (opts.url == '') {
  21. return;
  22. }
  23. var canSend = opts.onSend();
  24. if (!canSend) {
  25. return;
  26. }
  27. var vcount=++frameCount;
  28. var frameName = 'upload_frame_' + vcount;
  29. var iframe = $('<iframe style="position:absolute;top:-9999px" />').attr('name', frameName);
  30. var form = $('<form id="formUpload_'+vcount+'" method="post" class="abs_out" enctype="multipart/form-data" />').attr('name', 'form_' + frameName).attr("target", frameName).attr('action', opts.url);
  31. // form中增加数据域
  32. var formHtml = '<input type="file" id="formUpload_file_'+vcount+'" name="' + opts.fileName + '" οnchange="onChooseFile(this)">';
  33. form.append(formHtml);
  34. iframe.appendTo("body");
  35. form.appendTo("body");
  36. // iframe 在提交完成之后
  37. iframe.load(function() {
  38. var contents = $(this).contents().get(0);
  39. var data = $(contents).find('body').text();
  40. if ('json' == opts.dataType) {
  41. var data1 = eval('(' + data + ')');
  42. }
  43. opts.onComplate(data1);
  44. setTimeout(function() {
  45. iframe.remove();
  46. form.remove();
  47. }, 5000);
  48. });
  49. // 文件框
  50. //      alert($("#formUpload").attr("action"));
  51. $("#formUpload_"+vcount).children("input").click();
  52. };
  53. })(jQuery);
  54. // 选中文件, 提交表单(开始上传)
  55. var onChooseFile = function(fileInputDOM) {
  56. var form = $(fileInputDOM).parent();
  57. form.submit();
  58. };

对应的js代码：

[javascript] view plaincopy
  1. //附件上传
  2. var upload=function(options){
  3. Do('upload',function(options){
  4. $.upload({
  5. // 上传地址
  6. url: '/upload',
  7. // 文件域名字
  8. fileName: 'filedata',
  9. // 其他表单数据
  10. params: {name: 'pxblog'},
  11. // 上传完成后, 返回json, text
  12. dataType: 'json',
  13. // 上传之前回调,return true表示可继续上传
  14. onSend: function() {
  15. return true;
  16. },
  17. // 上传之后回调
  18. onComplate: function(json) {
  19. var path= json.data;
  20. alert(path);
  21. }
  22. });
  23. });
  24. }
  25. var uploadPic=function(){
  26. $("#uploadPicBtn").click(function(){
  27. var ele=$(this);
  28. upload(ele);
  29. })
  30. }
  31. uploadPic();

对应的controller方法：

[java] view plaincopy
  1. public static void upload() throws Exception {
  2. DataParser parser = DataParser.parsers.get(request.contentType);
  3. parser.parse(request.body);
  4. ArrayList<FileUpload> uploads = (ArrayList<FileUpload>) request.args
  5. .get("__UPLOADS");
  6. String fileName = "";
  7. for (FileUpload upload : uploads) {
  8. if (upload.getFileName().endsWith(".mp4")) {
  9. fileName = AudioUploadUtils.getUrlFromServer(upload.asFile());
  10. } else {
  11. fileName = PictureUploadUtils.getUrlFromServer(upload.asFile());
  12. }
  13. // break;
  14. }
  15. }

web端上传图片的几种方式相关推荐

  1. linux下实现web数据同步的四种方式(性能比较)

    实现web数据同步的四种方式 ======================================= 1.nfs实现web数据共享 2.rsync +inotify实现web数据同步 3.rs ...

  2. 实现web数据同步的四种方式

    实现web数据同步的四种方式 ======================================= 1.nfs实现web数据共享 2.rsync +inotify实现web数据同步 3.rs ...

  3. WEB通信交互的几种方式

    WEB通信交互的几种方式 - 实时通信发展过程简介 简单介绍一下现在的WEB通信有以下几种方式:最基本的http请求方式,Ajax轮询,Ajax长轮询,HTML5推送事件,HTML5的WebSocke ...

  4. laravel 图片流_laravel实现上传图片的两种方式小结

    第一:是laravel里面自带的上传方式(写在接口里面的) function uploadAvatar(Request $request) { $user_id = Auth::id(); $avat ...

  5. linux数据同步技术比较,linux下实现web数据同步的四种方式(性能比较)教程.docx

    linux下实现web数据同步的四种方式(性能比较)教程 实现web数据同步的四种方式=======================================1.nfs实现web数据共享2.rs ...

  6. web服务器攻击的八种方式

    随着互联网的高速发展,网络走进了千家万户,同时也有很大一部分人架设起了自己的网站.继而不安分的黑客们,又将目光对准了服务器攻击这个方式,从而破坏或取得服务器的管理权限.本文将主要讲述针对web服务器攻 ...

  7. core webapi缩略图_.Net Core WebApi上传图片的两种方式

    我这边主要是为了上传图片,话不多说,上代码. 方式一:通过Form表单上传 后端: /// /// 上传图片,通过Form表单提交 /// /// [Route("Upload/FormIm ...

  8. 关于web端的消息推送方式转载

    引言: 在互联网高速发展的时代里,web应用大有取代桌面应用的趋势,不必再去繁琐的安装各种软件,只需一款主流浏览器即可完成大部分常规操作,这些原因都在吸引着软件厂商和消费者.而随着各大厂商浏览器版本的 ...

  9. 移动端布局的5种方式

    刚换公司,设计稿还没出,也没有安排新任务,所以抽空整理一下移动端布局方式. 移动端布局方式整理: 1.固定meta视图 <meta name="viewport" conte ...

最新文章

  1. 多视图立体匹配论文分享CasMVSNet
  2. Mac上实现ProxyChains-NG终端代理
  3. C++ 创建快捷方式
  4. Table tr td th表格使用案例
  5. android fragment contextmenu,在 fragment 中，无法为listView项创建 contextMenu_android_开发99编程知识库...
  6. 经典ICP算法的问题
  7. java.lang.NoClassDefFoundError: javax/transaction/Synchronization （jUnit测试报错）
  8. C++实现整数值转中文大写
  9. ubuntu 安装GPU黑屏 修改GRUB_安装Ubuntu 18.04系统的相关注意事项，及解决Ubuntu 双系统黑屏问题...
  10. 2022年C语言教程入门和最新C语言自学教程C语言进阶教程大全
  11. caffe安装血泪史：caffe不支持cuDNN8
  12. 华为安装gsm框架_华为Mate30Pro怎么安装谷歌服务框架？谷歌服务GMS框架安装方法...
  13. 搭建服务器处理系统(基于netty),基于Netty的农业物联网服务器系统设计.PDF
  14. 2019上半年教资综合素质——主观题
  15. 使用Python实现消息轰炸
  16. 利用python拼接图片代码_Python实现图片拼接的代码
  17. 学一点Wi-Fi：Roaming
  18. 【错误记录】Android Studio 编译报错 ( Module was compiled with an incompatible version of Kotlin. The binary )
  19. Linux中wget、yum与apt-get用法及区别
  20. 导师的SCI很少一作和通讯是怎么回事？

热门文章

  1. 对平稳马尔可夫链（stationary distribution of a Markov chain）的学习
  2. 组件封装 - 骨架屏组件
  3. C语言知识-零零散散（四）
  4. OpenAI：ChatGPT 自动写代码功能测试
  5. Markdown小技巧：代码格式、缩进和字体大小
  6. git commit 命令详解
  7. 【内部类、匿名内部类、API】的学习
  8. 「GoCN酷Go推荐」go语言位操作库 — bitset
  9. 神码ai人工智能写作机器人_机器学习简介part1与人工智能的比较
  10. 烽火ExMobi移动应用平台能源行业初体验