js图片上传的封装代码
本文实例为大家分享了js图片上传的具体代码，供大家参考，具体内容如下
js封装的方法
function uploadImages(picker, url, callback) {
var img_uploader = WebUploader.create({
auto: true,
server: url,
pick: picker,
fileNumLimit: 1,
fileSingleSizeLimit: 2097152, // 2M
accept: {
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png',
// mimeTypes: 'image/*'
},
compress: {
width: 300,
compressSize: 102400 // < 100kb 不压缩
},
})
var fileType = ['image/jpeg', 'image/jpg', 'image/gif', 'image/png', 'image/bmp']
img_uploader.on('beforeFileQueued', function(file) {
fileType.some(function(name) {
return file.type === name
})
? '' : alert('请上传正确的图片！')
})
img_uploader.on('uploadSuccess', function(file, res) {
callback(file, res)
})
img_uploader.on('uploadError', function(file, reason) {
console.log(reason);
})
img_uploader.on('uploadComplete', function(file) {
img_uploader.reset()
})
}
html
<div id="zTu">图片</div>
javascript
var coverImage;
initImageUploader();
function initImageUploader(){
var fileUrl = 你想上传的地址;
uploadImages('#imagePicker', fileUrl, function(file, res) {
coverImage = res.url
$('#zTu').get(0).innerHTML = '<div class="file-item thumbnail"><img style="max-height:180px" src="' + res.url + '" /></div>'
})
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
-
本文向大家介绍php封装的单文件(图片)上传类完整实例，包括了php封装的单文件(图片)上传类完整实例的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了php封装的单文件(图片)上传类。分享给大家供大家参考，具体如下： 更多关于PHP相关内容感兴趣的读者可查看本站专题：《php文件操作总结》、《PHP图形与图片操作技巧汇总》、《PHP数组(Array)操作技巧大全》、《PHP基本语法入门教程
-
本文向大家介绍rails上传图片代码实例，包括了rails上传图片代码实例的使用技巧和注意事项，需要的朋友参考一下 今天讲解一下rails的图片上传，就是最平常的上传图片 这里的rails版本2.3.5 首先新建一个write_pic model内容如下： 上传 图片是用的插件所以最上面加载了插件。 调用write_pic 这个model的model文件写法如下 controller里面不用在
-
本文向大家介绍vue实现压缩图片预览并上传功能（promise封装），包括了vue实现压缩图片预览并上传功能（promise封装）的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了vue实现压缩图片预览并上传的具体代码，供大家参考，具体内容如下 主要用到filereader、canvas 以及 formdata 这三个h5的api 过程大致分为三步： 用户使用input file上传图
-
上传证件照片。支持 jpeg、jpg、bmp、png 格式，图片大小不超过2M。 // $path string 图片路径 $response = $app->media->upload($path);
-
本文向大家介绍HTML5 JS压缩图片并获取图片BASE64编码上传，包括了HTML5 JS压缩图片并获取图片BASE64编码上传的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了HTML5 JS压缩图片，并获取图片BASE64编码上传的方法，供大家参考，具体内容如下 基本过程 1) 调用 FileReader 的 reader.readAsDataURL(img); 方法, 在其on
-
本文向大家介绍JS HTML5拖拽上传图片预览，包括了JS HTML5拖拽上传图片预览的使用技巧和注意事项，需要的朋友参考一下 1.文件API：（File API） file类型的的表单控件选择的每一个文件都是一个file对象，而FileList对象则是这些file对象的集合列表，代表所选择的所有文件。file对象继承于Blob对象，该对象表示二进制原始数据，提供slice方法，可以访问到字节内部