WebUploader文件图片上传插件的使用

最近在项目中用到了百度的文件图片上传插件WebUploader。分享给大家

需要在http://fex.baidu.com/webuploader/download.html点击打开链接下载WebUploader

         // 初始化Web Uploader***上传图片var uploader = WebUploader.create({// 选完文件后，是否自动上传。auto: true,// 文件接收服务端地址，自动生成缩略图需要后端完成。server: '/common/uploadFile?imageZip=1',// 选择文件的按钮。可选。// 内部根据当前运行是创建，可能是input元素，也可能是flash.pick: '#sendimg',fileNumLimit: 5,//allowMagnify: false,// 只允许选择图片文件。accept:{title: 'Images',extensions: 'gif,jpg,jpeg,bmp,png',mimeTypes: 'image/*'}});// 当有文件添加进来的时候uploader.on( 'fileQueued', function( file ) {var $li = $('<div style="float:right" id="' + file.id + '" class="delimg">' +'<img class="addimg"><div class="closeimg">×</div>' +'</div>'),$img = $li.find('img');// $list为容器jQuery实例$("#piccon").append( $li );// 创建缩略图// 如果为非图片文件，可以不用调用此方法。// thumbnailWidth x thumbnailHeight 为 100 x 100uploader.makeThumb( file, function( error, src ) {if ( error ) {$img.replaceWith('<span>不能预览</span>');return;}$img.attr( 'src', src );}, 100, 100 );$li.on('click', function() {$(this).remove();})});// 文件上传过程中创建进度条实时显示。uploader.on( 'uploadProgress', function( file, percentage ) {var $li = $( '#'+file.id ),$percent = $li.find('.progress span');// 避免重复创建if ( !$percent.length ) {$percent = $('<p class="progress"><span></span></p>').appendTo( $li ).find('span');}$percent.css( 'width', percentage * 100 + '%' );});// 文件上传成功，给item添加成功class, 用样式标记上传成功。uploader.on( 'uploadSuccess', function( file,response ) {imgurl=response.fileName;//这里可以拿到后台返回的图片名称//alert(imgurl);$( '#'+file.id ).addClass('upload-state-done');});// 文件上传失败，显示上传出错。uploader.on( 'uploadError', function( file ) {var $li = $( '#'+file.id ),$error = $li.find('div.error');// 避免重复创建if ( !$error.length ) {$error = $('<div class="error"></div>').appendTo( $li );}$error.text('上传失败');});// 完成上传完了，成功或者失败，先删除进度条。uploader.on( 'uploadComplete', function( file ) {$( '#'+file.id ).find('.progress').remove();});

使用webupload封装后的图片上传

     //图片上传初始化function webuploader(){var showimg=seturl("/dream/app/upload/");// 初始化Web Uploader***上传图片var uploader = WebUploader.create({// 选完文件后，是否自动上传。auto: true,// 文件接收服务端。server: seturl("/dream/app/fileupload.php"),// 选择文件的按钮。可选。// 内部根据当前运行是创建，可能是input元素，也可能是flash.pick: '#sendimg',fileNumLimit: 3,method:"POST",//allowMagnify: false,// 只允许选择图片文件。accept:{title: 'Images',extensions: 'gif,jpg,jpeg,png',mimeTypes: 'image/*'}});// 当有文件添加进来的时候uploader.on( 'fileQueued', function( file ) {});// 文件上传过程中创建进度条实时显示。uploader.on( 'uploadProgress', function( file, percentage ) {});// 文件上传成功，给item添加成功class, 用样式标记上传成功。uploader.on( 'uploadSuccess', function( file,response ) {$("#piccon").append('<img id="'+response._raw+'" src="'+showimg+response._raw+'" class="addimg"><span id="'+response._raw+'" class="cimg">×</span>');$( '#'+file.id ).addClass('upload-state-done');});// 文件上传失败，显示上传出错。uploader.on( 'uploadError', function( file ) {var $li = $( '#'+file.id ),$error = $li.find('div.error');// 避免重复创建if ( !$error.length ) {$error = $('<div class="error"></div>').appendTo( $li );}$error.text('上传失败');});// 完成上传完了，成功或者失败，先删除进度条。uploader.on( 'uploadComplete', function( file ) {$( '#'+file.id ).find('.progress').remove();$(".cimg").click(function(){$(this).prev("img").remove();$(this).remove();})});}

WebUploader文件图片上传插件的使用相关推荐

think php上传图片,基于ThinkPHP5.0实现图片上传插件
这篇文章主要介绍了关于基于ThinkPHP5.0实现图片上传插件,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 thinkphp5.0 图片上传插件可预览裁剪图片和保存原图片,执行裁剪 ...
php 上传图片控件,ThinkPHP5.0实现图片上传插件实例分享
thinkphp5.0 图片上传插件可预览裁剪图片和保存原图片,执行裁剪图片后会删除裁剪的原图片目录,以便减少空间.具体实现代码大家参考下本文,希望能帮助到大家. 效果预览图: 该插件主要功能是:可 ...
使用Kindeditor的多文件(图片)上传时出现上传失败的解决办法/使用Flash上传多文件(图片)上传时上传失败的解决办法
近来用户反映希望我们把在线编辑器中的多图片上传功能实现,因为他们在编辑商品描述时经常会有一次上传多张图片的需求,如果要逐张选择的话效率很低,客户的需求就是我们的追求,很快我们就把完善功能排到了日程表中 ...
java 图片上传控件_Javashop 图片上传插件使用指南
一.概述 Javashop 图片上传插件是一款基于WebUploader插件所封装的上传图片插件. 可用于快速生成上传图片页面,有如下特点: 基于freemarker指令模式所编写,只需一个指令,并且 ...
文件图片上传及少许正则校验
文件 & 图片上传及少许正则校验 <template><div style="padding: 20px"><Row><Col ...
单文件图片管理php,php封装的单文件(图片)上传类完整实例
本文实例讲述了php封装的单文件(图片)上传类.分享给大家供大家参考,具体如下: //封装php中的单文件(图片)上传类 /* //参数1:$file 文件数组 5个属性值 name,type,siz ...
jquery 分片上传php,jquery 大文件分片上传插件 fcup.js
软件介绍 fcup.js fcup 是一款支持大文件切片上传插件.该jquery插件使用简单,配置简单明了,支持上传类型指定,进度条查看上传进度.. 安装直接下载源码,上传功能需要php环境,演示地 ...
Retrofit 2.0 超能实践（三），轻松实现多文件/图片上传/Json字符串/表单
通过前两篇姿势的入门 Retrofit 2.0 超能实践,完美支持Https传输 Retrofit2.0 完美同步Cookie实现免登录本文出自:http://blog.csdn.net/sk719 ...
Retrofit 2.0 轻松实现多文件/图片上传/Json字符串/表单
如果嫌麻烦直接可以用我封装好的库:Novate: https://github.com/Tamicer/Novate 通过对Retrofit2.0的前两篇的基础入门和案例实践,掌握了怎么样使用Retr ...

WebUploader文件图片上传插件的使用

WebUploader文件图片上传插件的使用相关推荐

最新文章

热门文章