基于webuploader.js的单图片上传封装
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的单图片上传封装的更多相关文章
- PHP 多图上传,图片批量上传插件,webuploader.js,百度文件上传插件
PHP 多图上传,图片批量上传插件,webuploader.js,百度文件上传插件(案例教程) WebUploader作用:http://fex.baidu.com/webuploader/gett ...
- 基于uploadify.js实现多文件上传和上传进度条的显示
uploadify是JQuery的一个插件,主要实现文件的异步上传功能,可以自定义文件大小限制.文件类型.是否自动上传等属性,可以显示上传的进度条.官网地址是http://www.uploadify. ...
- 30分钟玩转Net MVC 基于WebUploader的大文件分片上传、断网续传、秒传(文末附带demo下载)
现在的项目开发基本上都用到了上传文件功能,或图片,或文档,或视频.我们常用的常规上传已经能够满足当前要求了, 然而有时会出现如下问题: 文件过大(比如1G以上),超出服务端的请求大小限制: 请求时间过 ...
- asp.net 基于ajaxfileupload.js 实现文件异步上传
前台代码: /*修改头像*/ //上传 function _sc() { $(".ckfile").html("") ...
- Resumable.js – 基于 HTML5 File API 的文件上传
Resumable.js 是一个 JavaScript 库,通过 HTML5 文件 API 提供,稳定和可恢复的批量上传功能.在上传大文件的时候通过每个文件分割成小块,每块在上传失败的时候,上传会不断 ...
- 从web编辑器 UEditor 中单独提取图片上传,包含多图片单图片上传以及在线涂鸦功能
UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码.(抄的...) UEditor是非常好用的富文 ...
- ASP.NET CORE使用WebUploader对大文件分片上传,并通过ASP.NET CORE SignalR实时反馈后台处理进度给前端展示
本次,我们来实现一个单个大文件上传,并且把后台对上传文件的处理进度通过ASP.NET CORE SignalR反馈给前端展示,比如上传一个大的zip压缩包文件,后台进行解压缩,并且对压缩包中的文件进行 ...
- 基于h5的图片无刷新上传(uploadifive)
基于h5的图片无刷新上传(uploadifive) uploadifive简介 了解uploadify之前,首先了解来一下什么是uploadify,uploadfy官网,uploadify和uploa ...
- thinkphp 多图片上传 单图片上传
不管是单图片上传还是多图片上传都必须要引用这两个js 下载地址 链接:http://pan.baidu.com/s/1eStkUt0 密码:asvo <script src="Publ ...
随机推荐
- 201521123011《Java程序设计》第14周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多数据库相关内容. MySql数据库简单操作 1.启动与退出(quit或exit ) 操作 显示所有数据库: show databa ...
- WPF(C#) 矩阵拖动、矩阵动画、边缘展开动画处理。
最近在研发新的项目,遇到了一个桌面模式下的难点--展开动画.之前动画这方面没做过,也许很多人开始做的时候也会遇到相关问题,因此我把几个重点及实际效果图总结展示出来: 我的开发环境是在VS2017下进行 ...
- 设置文件opendilag、savedilog默认路径和文件类型
dlgSave1.Filter:='文件.txt|*.txt;|word文件|*.doc,*.docx'; dlgSave1.InitialDir:=GetCurrentDir; //设置为当前路径 ...
- SSH第一篇【整合SSH步骤、OpenSessionInView】
前言 到目前为止,Struts2.Hibernate.Spring框架都过了一遍了.也写过了Spring怎么与Struts2整合,Spring与Hibernate整合-本博文主要讲解SSH的整合 整合 ...
- Python循环列表删除元素问题
有人会遇到这种问题,遍历列表,想删除列表中的某几个元素,执行后发现有些并没有删除到, 比如以下代码 a=[1,2,3,4,5,6]print(a) for i in a: if i==3 or i== ...
- (转)Unity3D中移动物体位置的几种方法
1. 简介 在unity3d中,有多种方式可以改变物体的坐标,实现移动的目的,其本质是每帧修改物体的position. 2. 通过Transform组件移动物体 Transform 组件用于描述物体在 ...
- 关于ng-options
在实际使用过程中对angular的ng-options指令有点不解,有的时候觉得很容易理解和上手,但其实等到遇到问题时,发现它很是生疏,(key,value)键值对获取,as关键词,track by ...
- 系统学习java高并发系列二
转载请注明原创出处,谢谢! 什么是线程? 线程是进程的一个实体,是CPU调度和分派的基本单位,它是比进程更小的能独立运行的基本单位.线程自己基本上不拥有系统资源,只拥有一点在运行中必不可少的资源(如程 ...
- Spring 学习——基于Spring WebSocket 和STOMP实现简单的聊天功能
本篇主要讲解如何使用Spring websocket 和STOMP搭建一个简单的聊天功能项目,里面使用到的技术,如websocket和STOMP等会简单介绍,不会太深,如果对相关介绍不是很了解的,请自 ...
- "HK"日常之用C# Process写一只小病毒
众所周知,Process可以启动和关闭电脑上的进程,命名空间位于 System.Diagnostics,本次的教程就是利用其中的GetProcesses和Kill方法来实现的. 一.编码工作 首先我们 ...