文档章节

图片上传插件 plupload 使用 预览图 注:测试需接口才能看见效果

史文帝
 史文帝
发布于 2017/01/17 16:54
字数 857
阅读 133
收藏 0

引入js文件,plupload的源文件可以到github上去下载

html:

<input type="file" id="upPic" style="height: 100%; width: 100%; background-color: aquamarine;

">

<div classs="fx"></div>  

js:

var uploader = new plupload.Uploader({ //实例化一个plupload上传对象
    browse_button: 'upPic', //输入要绑定的元素 为id值,绑定成功后点击该元素就会触发!
    url: '/api/uploadAuth', //上传图片的地址
    unique_names: true, //当值为true时会为每个上传的文件生成一个唯一的文件名,并作为额外的参数post到服务器端,参数明为name,值为生成的文件名。
    filters: {
        max_file_size: '2mb', //限制图片的大小
        prevent_duplicates: true,
        mime_types: [ //只允许上传图片文件
            {
                extensions: "jpg,jpeg,gif,png" //文件格式
            }
        ],

    }
});

uploader.init(); //初始化

uploader.bind('FilesAdded', function(uploader, files) { //为uploader添加FilesAdded事件,当文件添加到上传队列后触发。监听函数参数:(uploader,files)
    //uploader为当前的plupload实例对象,files为一个数组,里面的元素为本次添加到上传队列里的文件对象
    if(files.length + $(".uPviewthumgImg").length > 2) {  //数组中上传的长度小于2才执行下面
        for(var i = 0; i < files.length; i++) {
            uploader.removeFile(files[i]);//删除当前对象里的数组元素。
        }
        alert("只能上传两张 ");
        return false;
    }
    if($(".uPviewthumgImg").length > 1) { //判断该图片的类名总的长度是否小于1
        for(var i = 0; i < files.length; i++) {
            uploader.removeFile(files[i]); //删除当前对象里的数组元素。
        }
        alert("只能上传两张 ");
        return false;
    }

    uploader.start(); //开始上传

});

uploader.bind('UploadProgress', function(uploader, files) {//为uploader添加FilesAdded事件,会在文件上传过程中不断触发,可以用此事件来显示上传进度
    $(".fx p").html("图片上传中,请稍后...");  //这里是提示,样式可自己控制
})

//success 
uploader.bind('FileUploaded', function(uploader, file, responseObject) {//当队列中的某一个文件上传完成后触发    
/*uploader为当前的plupload实例对象,file为触发此事件的文件对象,responseObject为服务器返回的信息对象,它有以下3个属性:
response:服务器返回的文本
responseHeaders:服务器返回的头信息
status:服务器返回的http状态码,比如200*/
    if(responseObject.response) {
        _obj = eval("(" + responseObject.response + ")");
    }
    if(!_obj) return false;
    if(_obj.error == 0 && _obj.filepath != "") {
        imgsrc = _obj.url;
        $('.fx').append('<img  data-path="' + _obj.filepath + '" class="uPviewthumgImg" src="' + imgsrc + '"  alt="图片上传中请稍后"/>');
        $(".fx p").html("图片上传成功")
    } else {
        $(".fx p").html("上传图片失败")
    }

});

//plupload中为我们提供了mOxie对象
//有关mOxie的介绍和说明请看:https://github.com/moxiecode/moxie/wiki/API
//如果你不想了解那么多的话,那就照抄本示例的代码来得到预览的图片吧
function previewImage(file, callback) { //file为plupload事件监听函数参数中的file对象,callback为预览图片准备完成的回调函数
    if(!file || !/image\//.test(file.type)) return; //确保文件是图片
    if(file.type == 'image/gif') { //gif使用FileReader进行预览,因为mOxie.Image只支持jpg和png
        var fr = new mOxie.FileReader();
        fr.onload = function() {
            callback(fr.result);
            fr.destroy();
            fr = null;
        }
        fr.readAsDataURL(file.getSource());
    } else {
        var preloader = new mOxie.Image();
        preloader.onload = function() {
            preloader.downsize(300, 300); //先压缩一下要预览的图片,宽300,高300
            var imgsrc = preloader.type == 'image/jpeg' ? preloader.getAsDataURL('image/jpeg', 80) : preloader.getAsDataURL(); //得到图片src,实质为一个base64编码的数据
            callback && callback(imgsrc); //callback传入的参数为预览图片的url
            preloader.destroy();
            preloader = null;
        };
        preloader.load(file.getSource());
    }
}

function smsCode(seconds) {
    var param = {};
    param.tempname = $('#temp_mobile').val();
    param.tempvercode = $('#tempvercode').val();
    param.tempcountry = $('#temp_country').val();
    $.post('/Personal/sendPhoneSms', param, function(res) {
        if(res.code == 1000) {
            $('#smsCodeBtn').hide();
            $('#smsCodeBtnDisable').show();
            var num = seconds;
            var smsCodeInterval = setInterval(function() {
                num--;
                if(num == 0) {
                    clearInterval(smsCodeInterval);
                    $('#smsCodeBtn').show();
                    $('#smsCodeBtnDisable').hide();
                }
                $('#smsCodeBtnDisable span').html(num);
            }, 1000);
        } else {
            $('#temp_mobileauth_err').text(res.msg);
        }
    }, 'json');

}

 

© 著作权归作者所有

共有 人打赏支持
史文帝
粉丝 1
博文 24
码字总数 8566
作品 0
孝感
程序员
私信 提问
7 款 JavaScript 的 Ajax 文件上传插件

jQuery File Upload jQuery File Upload 是一个Jquery图片上传组件,支持多文件上传、取消、删除,上传前缩略图预览、列表显示图片大小,支持上传进度条显示;支持各种动态语言开发的服务器端...

oschina
2012/05/09
26K
13
AjaXplorer 5.0.2 发布,远程文件管理

AjaXplorer 5.0.2 是一个 bugfix 版本,可通过应用内的升级机制进行更新,建议更新。修复了一些上传的问题 (jumploader 和 plupload) ,修复了各种 zip 浏览和创建的问题;可在插件配置中选用...

oschina
2013/07/20
2.6K
1
PHP仿微信多图片预览

PHP仿微信多图片预览下载演示地址:http://www.erdangjiade.com/js/830 生产图片区域,上传按钮#btn可替换自己想要的图片 plupload上传 var uploader = new plupload.Uploader({//创建实例的...

2当家的
2017/01/16
315
0
qiniu-js-sdk

基于七牛API及Plupload开发的前端JavaScript SDK 本SDK适用于IE8+、Chrome、Firefox、Safari 等浏览器,基于 七牛云存储官方API 构建,其中上传功能基于 Plupload 插件封装。开发者使用本 SD...

小编辑
2014/09/11
1K
0
【前端】图片裁剪(二)Jcrop实现裁剪

学着做自己,并优雅的放手不属于自己的。 前一篇文章已经跟大家讲述了如何利用JavaScript实现Web端图片裁剪功能。可能对大多数人来说,利用JavaScript去实现裁剪功能比较费事,那这一篇文章将...

zrunker
2017/10/25
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Android服务2 BindService

MainActivity { class MyService extends Service { public void onCreate() {} public IBinder onBind(Intent intent) { //return new Binder(); retutn new MyBinder(); } public boolean ......

Coding缘
13分钟前
0
0
所有和Java中代理有关的知识点都汇集于此,速进学干货。

对于每一个Java开发来说,代理这个词或多或少都会听说过。你可能听到过的有代理模式、动态代理、反向代理等。那么,到底什么是代理,这么多代理又有什么区别呢。本文就来简要分析一下。 代理...

Java填坑路
20分钟前
0
0
镜像即代码:基于Packer构建阿里云镜像

什么是Packer Packer是HashiCorp推出的一款工具,旨在提供简易的方式自动化构建镜像。通过Packer,你只需要在配置文件中指明镜像构建所需的基本信息及期望安装到镜像中的软件及配置,即可通过...

迷你芊宝宝
20分钟前
0
0
好程序员前端教程之JavaScript闭包和匿名函数的关系详解

好程序员前端教程之JavaScript闭包和匿名函数的关系详解 本文讲的是关于JavaScript闭包和匿名函数两者之间的关系,从匿名函数概念到立即执行函数,最后到闭包。下面一起来看看文章分析,希望...

好程序员IT
28分钟前
0
0
简单的file获取文本内容且, 修改文本内容(java8)

题主, 因入职新公司, 表设计混乱, 不得不手动写一个小脚本,获取所有字段后,重新写入至新表中; 思路 顺序如下 原sql 具体, 获取行 , 根据行开头的" ,"截取内容, 重新输入到txt, 中就可以了; 代...

尾生
38分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部