图片上传JS插件梳理与学习
项目的oper端和seller端,用了两个不同插件,简单了解一下:
一、seller端:AjaxUpload.js
seller端使用的是 AjaxUpload.js ,封装好的一个库。调用时传入参数,配置相关属性即可。
1、使用步骤
引入JS文件;
JS代码构建对象,传入对应参数;同时JS中的方法可以进行图片上传之前之后的处理;
后台:实现图片上传同时返回结果;
2、AjaxUpload的学习参考:
http://www.zhangxinxu.com/wordpress/2009/11/ajax-upload多文件上传插件翻译及中文演示/
教程很详细,和自己使用的非常类似。对于一些参数、方法的解析也很详细。可以参考。(后面的中文也是链接地址)
http://zhaoyanblog.com/archives/83.html
教程:简单的讲解了一下使用,以及参数的配置。不如上一篇,不过也很有参考意义,胜在简洁。
3、IE不兼容问题:解决 ie 返回json数据时提示下载
- 解决 ie 返回json提示下载 ResponseEntity方法 - all_forone - 博客园 http://www.cnblogs.com/allforone/p/3984702.html#commentform
注:其实网上有很多教程,只是这一篇重点提示了ResponseEntity的使用,我之前不知道如何使用导致不敢尝试此种方法。此种方法应该是成功率最高的。
4、代码备份:
控件源码:https://drive.google.com/open?id=1uXDckVgUpSNdV8iJfnpNVJwiGJ1THohm
调用控件地方:https://drive.google.com/open?id=1Zhzj7n1VBiXn3qZjbEVqqDFO4esparva
后台代码(包括获取图片宽度和高度):https://drive.google.com/open?id=1vNl04hGqNfktrxJlTbXVsBs3R9jf_O_c
二、oper端:Plupload.js
oper端用的是另一个插件:Plupload.js 都是插件,使用起来区别不大。
1、使用步骤:
引入plupload的源码;
创建对象等步骤,以及初始化看Demo吧,这个没必要重复;
其他逻辑同上一个;
2、学习参考:
https://www.cnblogs.com/2050/p/3913184.html
超级详细的一个教程,有全部属性的介绍,还有一个简单的Demo,几乎就是官方文档的翻译了...
http://blog.csdn.net/qq_30100043/article/details/78491993
里面的Demo比上面的教程详细一点,可以参考。
3、结束;
图片上传JS插件梳理与学习的更多相关文章
- 头像截取 图片上传 js插件
先看一下整体效果 页面html <div class="row"> <div class="tabs-container"> <u ...
- 图片上传jQuery插件(兼容IE8)
图片上传jQuery插件(兼容IE8) 代码来源 :https://github.com/zilan93/uploadImg html <!DOCTYPE html> <ht ...
- 百度编辑器前后端二开图片上传Js Thinkphp tp5 ueditor
百度编辑器图片上传Jsueditor.all.min.js 下载链接 链接:https://pan.baidu.com/s/1VNgw9ELgRRHKeCQheFkQTw 提取码:fnfi 使用方法: ...
- springMVC3 ckeditor3.6 图片上传 JS回调
一.引入js文件 <script type="text/javascript" src="<%=base %>/resources/ckeditor/c ...
- 适用于各浏览器支持图片预览,无刷新异步上传js插件
文件上传无疑是web应用中一个非常常用的功能,不管是PHP.jsp还是aspx.mvc等都会需要文件上传,但是众所周知当使用自带的文件上传功能时总会出现页面刷新的情况.当然现在有了html5这个好东西 ...
- 阿里云OSS图片上传plupload.js结合jq-weui 图片上传的插件
项目中用到了oss上传,用的plupload,奈何样式上不敢恭维,特别是放在移动端上使用.于是自己把它移植到了jq weui的上传图片组件上. 更改:选择照片后确认即及时上传至oss服务器,不限制上传 ...
- 图片上传js
var imgURL; function getImgURL(node) { try{ var file = null; if(node.files && node.files[0] ...
- ASP.Net MVC3 图片上传详解(form.js,bootstrap)
图片上传的插件很多,但很多时候还是不能切合我们的需求,我这里给大家分享个我用一个form,file实现上传四张图片的小demo.完全是用jquery前后交互,没有用插件. 最终效果图如下: 玩过花田人 ...
- 推荐ajaxfilemanager for tiny_mce 比较完善的tiny_mce编辑器的图片上传及图片管理插件PHP版 支持中文
tiny_mce编辑器,我觉得挺简洁.好用的,但就是图片上传的插件是收费的,而且网上找了半天也没有找到开源好用的上传插件. 不过功夫不负有心人,终于还就被我找到一款相当满意的插件. 这个插件的名字叫a ...
随机推荐
- Python CODE——Nonblocking I/O client AND Delaying Server
#!Nonblocking I/O - Chapter 5 -pollclient.py import socket,sys,select port=51423 host='localhost' sp ...
- css样式布局中position的那些事儿
哎,页面布局及设计开发.对于一个一直从事后台开发来说屌丝来说,确实是件非常费时.费力,非常艰难的一件事. 今晚是想实现把多张重叠在一起.或是标记一张图片中不同的位置然后赋以超链接.花了一晚上的时间,才 ...
- Eclipse 安装应用SVN地址
SVN插件下载地址及更新地址,你根据需要选择你需要的版本.现在最新是1.8.xLinks for 1.8.x Release:Eclipse update site URL: http://subcl ...
- mysql的innodb数据库引擎详解
http://www.jb51.net/softjc/158474.html 这篇文章主要介绍了mysql的innodb数据库引擎,需要的朋友可以参考下 一.mysql体系结构和存储引擎 1. ...
- Xilinx DDR3 IP核使用问题汇总(持续更新)和感悟
一度因为DDR3的IP核使用而发狂. 后来因为解决问题,得一感悟.后面此贴会完整讲述ddr3 ip的使用.(XILINX K7) 感悟:对于有供应商支持的产品,遇到问题找官方的流程.按照官方的指导进行 ...
- Android 使用handler实现线程间发送消息 (主线程 与 子线程之间)、(子线程 与 子线程之间)
keyword:Android 使用handler实现线程间发送消息 (主线程 与 子线程之间).(子线程 与 子线程之间) 相信大家平时都有使用到异步线程往主线程(UI线程)发送消息的情况. 本文主 ...
- python自动生成文件头
"auto add pyhton header --start autocmd BufNewFile *.py 0r ~/.vim/vim_template/vim_python_heade ...
- Google Pagespeed,自动压缩优化JS/CSS/Image
Google Pagespeed,自动压缩优化JS/CSS/Image 浏览: 发布日期:// 分类:技术分享 关键字: Nginx Appache Pagespeed 自动压缩优化JS/CSS/Im ...
- virtualenv下使用matplotlib
Unable to “import matplotlib.pyplot as plt” in virtualenv (PyMVPA) SimilarFacedeMacBook-Pro:PyMVPA ...
- leetCode 75.Sort Colors (颜色排序) 解题思路和方法
Given an array with n objects colored red, white or blue, sort them so that objects of the same colo ...