HTML代码

<div class="manageImgUp">点击图片上传</div>
<div class="manageImgUpLcm">
  <img class="manageImgUpLcmImg" src="" width="80" height="40" />
</div>

Js代码

  imgUp("/uploader/carousel", ".manageImgUp", ".manageImgUpLcmImg");

封装代码

var https = "https://www.xxxx.com/leather";
//轮播信息添加
function upImgLcm(url1,click){
var imgSrc = "";
var uploader = WebUploader.create({
// 选完文件后,是否自动上传。
auto: true,

// swf文件路径
swf:'../js/Uploader.swf',

// 文件接收服务端。
server: https + url1,
// 选择文件的按钮。可选。
// 内部根据当前运行是创建,可能是input元素,也可能是flash.
pick: click,

// 只允许选择图片文件。
accept: {
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/jpg,image/jpeg,image/png'
}
});
return uploader;
}
//图片上传封装
function imgUp(url, class1, class2) {
var imgSrc;
var uploader = upImgLcm(url, class1);
imgSrc = uploader.on('uploadSuccess', function(file, response) {
var imgSrc1 = response._raw;
$(class2)[0].src = imgSrc1;
imgSrc = imgSrc1;
return imgSrc1;
});
}

基于webuploader.js的单图片上传封装的更多相关文章

  1. PHP 多图上传,图片批量上传插件,webuploader.js,百度文件上传插件

    PHP  多图上传,图片批量上传插件,webuploader.js,百度文件上传插件(案例教程) WebUploader作用:http://fex.baidu.com/webuploader/gett ...

  2. 基于uploadify.js实现多文件上传和上传进度条的显示

    uploadify是JQuery的一个插件,主要实现文件的异步上传功能,可以自定义文件大小限制.文件类型.是否自动上传等属性,可以显示上传的进度条.官网地址是http://www.uploadify. ...

  3. 30分钟玩转Net MVC 基于WebUploader的大文件分片上传、断网续传、秒传(文末附带demo下载)

    现在的项目开发基本上都用到了上传文件功能,或图片,或文档,或视频.我们常用的常规上传已经能够满足当前要求了, 然而有时会出现如下问题: 文件过大(比如1G以上),超出服务端的请求大小限制: 请求时间过 ...

  4. asp.net 基于ajaxfileupload.js 实现文件异步上传

    前台代码: /*修改头像*/       //上传       function _sc() {           $(".ckfile").html("") ...

  5. Resumable.js – 基于 HTML5 File API 的文件上传

    Resumable.js 是一个 JavaScript 库,通过 HTML5 文件 API 提供,稳定和可恢复的批量上传功能.在上传大文件的时候通过每个文件分割成小块,每块在上传失败的时候,上传会不断 ...

  6. 从web编辑器 UEditor 中单独提取图片上传,包含多图片单图片上传以及在线涂鸦功能

    UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码.(抄的...) UEditor是非常好用的富文 ...

  7. ASP.NET CORE使用WebUploader对大文件分片上传,并通过ASP.NET CORE SignalR实时反馈后台处理进度给前端展示

    本次,我们来实现一个单个大文件上传,并且把后台对上传文件的处理进度通过ASP.NET CORE SignalR反馈给前端展示,比如上传一个大的zip压缩包文件,后台进行解压缩,并且对压缩包中的文件进行 ...

  8. 基于h5的图片无刷新上传(uploadifive)

    基于h5的图片无刷新上传(uploadifive) uploadifive简介 了解uploadify之前,首先了解来一下什么是uploadify,uploadfy官网,uploadify和uploa ...

  9. thinkphp 多图片上传 单图片上传

    不管是单图片上传还是多图片上传都必须要引用这两个js 下载地址 链接:http://pan.baidu.com/s/1eStkUt0 密码:asvo <script src="Publ ...

随机推荐

  1. 201521123121 《Java程序设计》第10周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常与多线程相关内容. 进程:每个进程都有独立的代码和数据空间,进程间的切换会有较大的开销,一个进程包含1--n个线程. 线程:同一 ...

  2. Java I/O 从0到1 - 第Ⅰ滴血 File

    前言 File 类的介绍主要会依据<Java 编程思想>以及官网API .相信大家在日常工作中,肯定会遇到文件流的读取等操作,但是在搜索过程中,并没有找到一个介绍的很简洁明了的文章.因此, ...

  3. 网络配置之基本网络配置(cenos6)

    目录: 关于IP的管理 Linux网卡的卸载与装载 配置网络接口 网络IP配置文件路由管理 路由管理命令 配置动态路由(简介) route的配置文件netstat命令IP命令 ip link 查看网络 ...

  4. Python接口测试自动化说明及代码实例:含get、post、put、delete等方法

    一.接口说明文档 环境准备: 安装火狐 安装插件: httprequester https://addons.mozilla.org/en-US/firefox/addon/httprequester ...

  5. 超简单的js评价小星星

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. 【个人笔记】《知了堂》前端mySql基础

    指定列之后添加: ALTER TABLE 表名 ADD 添加的新列名 INT AFTER 指定列之后 第一个位置: ALTER TABLE 表名 ADD 添加的新列名 varchar(20) AFTE ...

  7. 两句话动态修改table数据并提交到后台

    //为所有的input 添加click事件,我将对象的id放入到name属性中,行数放入到alt属性中 $("input").click(function(obj){ //获得当前 ...

  8. window10简单安装MongoDB

    文章参考 在Windows上安装MongoDB 首先,在官网下载安装包.下载地址 内容如下所示: 配置 1. 创建数据目录 E:\MongoDB\data\db 2. 配置环境变量 运行 1. 命令行 ...

  9. pytorch实现DCGAN、pix2pix、DiscoGAN、CycleGAN、BEGAN以及VAE

    https://github.com/sunshineatnoon/Paper-Implementations

  10. java从命令行接收多个数字,求和程序分析

    问题:编写一个程序,此程序从命令行接收多个数字,求和之后输出结果. 1.设计思想 (1)声明两个变量接收输入的字符串 (2)将字符串转换成int类型 (3)输出求和 2.程序流程图 3.源程序代码 i ...