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. 201521123049 《JAVA程序设计》 第10周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常与多线程相关内容. 2. 书面作业 本次PTA作业题集异常.多线程 1.finally 题目4-2 1.1 截图你的提交结果(出 ...

  2. 201521123089 《Java程序设计》第12周学习总结

    1. 本周学习总结 1. Input Stream -- 数据提供者可从其中读数据输出流:Output Stream -- 数据接收者可往其中写数据: 2. 字符流底层具体读写操作还是使用字节流: 3 ...

  3. HashMap 学习心得

    1.构造 HashMap 底层数据结构线性数组,HashMap有一个静态内部类Entry,Entry有四个属性,key,value,next,hash Entry就是HashMap键值对实现的一个基础 ...

  4. wampserver启动不起来的原因?

    如果没怎么动wamp的配置文件就发现wampserver启动不起来了,那么可能你碰到了iis服务器. 原因是apache的端口占用的是80,而iis的端口占用也是80所以造成了不能启动wampserv ...

  5. 在腾讯云上搭建WordPress博客

    笔者一直很羡慕那些搭建了个人博客的大牛,在最近工作之余也尝试着搭建了自己的博客,历时1周,这篇文章就将踩过的坑记录下来,先看下成果,链接在此 1- 购买腾讯云主机 腾讯云官网,我选了79元/月的最便宜 ...

  6. 生成验证码JSP【复用代码】

    该JSP可以生成验证码.以后用到的时候就方便了. <%@ page language="java" pageEncoding="UTF-8"%> & ...

  7. Java实现基本排序算法

    稳定排序算法性能比较 冒泡排序代码: /** * 冒泡排序 * * @param arr * @return */ public int[] bubbleSort(int[] arr) { int t ...

  8. java基本类型与Hadoop常见基本类型的对照

    Long LongWritable Integer IntWritable Boolean BooleanWritable String Text 1.java类型转化为hadoop基本类型 调用ha ...

  9. ubuntu下程序员常用命令大全

    一.ubuntu下用命令查询系统版本 1.在终端中执行下列指令: cat /etc/issue 该命令可查看当前正在运行的ubuntu的版本号. 效果如图: 2.使用 lsb_release 命令也可 ...

  10. 初学者一些常用的SQL语句(一)

    一.数据库的创建create database 数据库名create database bbb二.表的创建 ***[]:可选项*** null:空值 not null 不为空***只有字符型能指定长度 ...