基于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;
});
}

转载于:https://www.cnblogs.com/lcming/p/7419106.html

基于webuploader.js的单图片上传封装相关推荐

利用WeX5平台实现单图片上传功能
前段时间做过基于手机app的单图片上传.多图片上传的,现在把单图片上传的案例分享给有需要的朋友,欢迎有需要的朋友评论点赞,谢谢一.效果图二.开发思路图片上传主要是调用cordova插件,调用拍照 ...
从web编辑器 UEditor 中单独提取图片上传，包含多图片单图片上传以及在线涂鸦功能...
UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码.(抄的...) UEditor是非常好用的富文 ...
webuploader结合php实现图片上传到本地和保存数据库
webuploader结合php实现图片上传到本地和保存数据库,核心功能是以下三点: 一.上传前图片预览二.上传图片到本地文件夹三.上传图片路径和图片对应的设备编号到mysql数据库 Webupl ...
mui 批量上传图片 php,MUI+Hbuilder之多图片，单图片上传（五）
按钮 js: document.getElementById("uploadImg").addEventListener("tap", function() { ...
JS中使用FormData上传文件、图片的方法
参考博客:http://www.cnblogs.com/xiaohuochai/p/6543019.html http://www.cnblogs.com/qcloud1001/p/6839541.h ...
基于华为云obs实现文件上传下载（技术栈mysql+springboot+Maven+jsp+java）的技术分享
基于华为云obs实现文件上传下载(技术栈mysql+springboot+jsp+java)的技术分享 obs实现文件上传下载前言一.OBS是什么? 二.使用步骤 1.1 前期准备 2 工具的内容 ...
ueditor单图片上传没有触发afterinsertimage事件
在一个开发过程中,想在图片上传后调用一些业务,在选择多图片上传的时候可以顺利调用,但是选择单图片上传的时候并不能调用到afterinsertimage事件在网上没能找到合适的解决办法,只能听着别人的 ...
js插件---IUpload文件上传插件（包括图片）
js插件---IUpload文件上传插件(包括图片) 一.总结一句话总结:上传插件找到真正上传位置的代码,这样就可以知道整个上传插件的逻辑了, 找资料还是github+官方 1.如何在js中找到真正 ...
php 输出图片给js,如何在php中利用croppic.js对图片进行剪切并上传
如何在php中利用croppic.js对图片进行剪切并上传发布时间:2021-01-30 16:41:02 来源:亿速云阅读:92 作者:Leah 这篇文章将为大家详细讲解有关如何在php中利用c ...

基于webuploader.js的单图片上传封装

基于webuploader.js的单图片上传封装相关推荐

最新文章

热门文章