一个百度开发的开源框架

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<link rel="stylesheet" type="text/css" href="css/webuploader.css">
<script src="js/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="js/webuploader.min.js"></script>
<script>
$(function() {
var uploader = WebUploader.create({
auto : true, // 选完文件后，是否自动上传
swf : 'js/Uploader.swf', // swf文件路径
server : 'upload.php', // 文件接收服务端
pick : '#imgPicker', // 选择文件的按钮。可选
// 只允许选择图片文件。
accept : {
title : 'Images',//文字描述
extensions : 'gif,jpg,jpeg,bmp,png',//允许的文件后缀，不带点，多个用逗号分割。
mimeTypes : 'image/*'
}
/*
,
thumb:{
width:600,
height:400
}
*/
});

uploader.on('fileQueued',function(file) {
var $list = $("#fileList");
var $li = $('<div id="' + file.id + '" class="file-item thumbnail">'
+ '<img>'
+ '<div class="info">'
+ file.name
+ '</div>'
+ '</div>');

var $img = $li.find('img');

// $list为容器jQuery实例
$list.append($li);

// 创建缩略图
uploader.makeThumb(file, function(error, src) {
if (error) {
$img.replaceWith('<span>不能预览</span>');
return;
}

$img.attr('src', src);//给img标签赋值src路径
}, 100, 100); //100x100为缩略图尺寸
});

//文件上传过程中创建进度条实时显示。
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, res) {
console.log(res.filePath);//这里可以得到上传后的文件路径
$('#' + 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();
});

/*
uploader.option( 'compress', {
width: 1600,
height: 1600
});*/
});
</script>
</head>

<body>

<div id="uploadimg">
<div id="fileList" class="uploader-list"></div>
<div id="imgPicker">选择图片</div>
</div>

</body>
</html>

webuploader.min.js 简单例子的更多相关文章

  1. jsonp的简单例子

    jsonp的简单例子 index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q ...

  2. JavaScript模块化-RequireJs实现AMD规范的简单例子

    AMD规范简介 AMD(异步模块定义),是实现JavaScript模块化规范之一,它采用异步方式加载模块,模块的加载不影响后面语句的运行.require.js和curl.js都是实现AMD规范的优秀加 ...

  3. jquery.serializejson.min.js的妙用

    关于这个jquery.serializejson.min.js插件来看,他是转json的一个非常简单好用的插件. 前端在处理含有大量数据提交的表单时,除了使用Form直接提交刷新页面之外,经常碰到的需 ...

  4. 如何判断一个DOM元素正在动画，一个CSS“阻塞”JS的例子

    一般情况下CSS不会直接影响JS的程序逻辑,但是以CSS实现动画的话,这个便不太确定了,这个故事发生在与UED迁移全局样式的过程. 曾经我有一段实现弹出层隐藏动画的代码是这个样子的: if (this ...

  5. Vue.js简单实践

    直接上代码,一个简单的新闻列表页面(.cshtml): @section CssSection{ <style> [v-cloak] { display: none; } </sty ...

  6. Mvc 之System.Web.Optimization 压缩合并如何让*.min.js 脚本不再压缩

    最近项目中用到了easy ui ,但是在配置BundleConfig 的时候出现了问题,easy ui的脚本jquery.easyui.min.js 压缩后出现各种脚本错误,总是莫名其妙的 i标量错误 ...

  7. Websocket简单例子

    websocket是Html5的一个协议,也就是说距离我们2016年就几年时间,其他原理我就不说了,直接讲例子 一.准备材料:1.一个开发工具必须支持javaEE7的,原因是javaEE6或以下不支持 ...

  8. 通过jquery.transit.min.js插件，实现图片的移动

    首先给出插件:jquery.transit.min.js (function(t,e){if(typeof define==="function"&&define. ...

  9. js简单显示和隐藏div，触发超链接，动态更改button值，setInterval（）简单使用，jquery easyui弹出框简单使用 .

    js简单显示和隐藏div .<!DOCTYPE html> .<html> .<head> .<meta charset="UTF-8"& ...

随机推荐

  1. Eclipse的Project Facets属性

    Project Facets 1. 'Project Facets'可理解为:项目的特性,主流 IDE (Eclipse IDEA) 都提供了 facet 的配置.  'Project Facets' ...

  2. linux dd指令

    ghost和g4l 安装操作系统,速度太慢,整个过程太冗长乏味了. 安装过程中,需要回答若干问题,系统需要安装无数个软件,创建和写入无数的文件.因为涉及到大量的文件定位和读写,速度一定是快不起来的. ...

  3. 【租房合同】2017北京市房屋租赁合同(自行成交版).doc

    最近在北京租房,找租房合同 这个文档还是比较新的,在百度文库上需要积分下载的文档,现在共享给大家吧. 下载地址: https://pan.baidu.com/s/1cEh7lhBqQgkJhB32Df ...

  4. python单引号(')、双引号(")、三引号('''，""")

    python对字符串的表示方法比c更有灵活性,但是也更难理解. 为了在平时使用.看代码过程中对着单引号(').双引号(").三引号(''',""")不混淆,知道 ...

  5. 十一、K3 WISE 开发插件《VB插件开发如何代码调试 - 步骤讲解》

    =================================== 目录: 1.配置代码调试启动程序kdmain.exe 2.设置断点 3.触发调试 4.变量跟踪 ================ ...

  6. 机器人学 —— 轨迹规划（Artificial Potential）

    今天终于完成了机器人轨迹规划的最后一次课了,拜拜自带B - BOX 的 Prof. TJ Taylor. 最后一节课的内容是利用势场来进行轨迹规划.此方法的思路非常清晰,针对Configration ...

  7. [原]openstack-kilo--issue(十三)Unauthorized: The request you have made requires authentication. (HTTP 401) (Request

    在运行nova-list 的时候发现报错401:如下面 ========>>>>>>>>> 正常显示 [root@controller ~]# n ...

  8. 企业应用打包的时候 修改ipa包的bundle identifier

    1.将ipa包后缀改为.zip,解压,之后打开包文件,找到info.plist文件后,修改相应的项就可以了.把修改后的文件重新压缩成zip,把zip改为ipa,替代原来的ipa,就可以了. 解决这个问 ...

  9. C++文件流操作

    #include <iostream> #include <fstream> #include<iostream> using namespace std; int ...

  10. Ubuntu下配置使用mysql

    很多生产环境都使用linux系统,相比于window系统,界面真的做的不够人性化,但是简洁高效也是linux的优点吧.在linux上使用mysql又是不一样的风景吧.