文档章节

WebUploader 上传,仿淘宝宝贝发布

loowj
 loowj
发布于 2016/04/14 09:17
字数 578
阅读 121
收藏 10
<div class="m-upload-group">
                    <div class="upload-group-item">
                        <div class="upload-group-item-add">
                            <i class="ifont ifont-jia"></i>
                            <div class="upload-group-item-text">宝贝图</div>
                        </div>
                    </div>
                    <div class="upload-group-item">
                        <div class="upload-group-item-add">
                            <i class="ifont ifont-jia"></i>
                            <div class="upload-group-item-text">宝贝图</div>
                        </div>
                    </div>
                    <div class="upload-group-item">
                        <div class="upload-group-item-add">
                            <i class="ifont ifont-jia"></i>
                            <div class="upload-group-item-text">宝贝图</div>
                        </div>
                    </div>
                    <div class="upload-group-item">
                        <div class="upload-group-item-add">
                            <i class="ifont ifont-jia"></i>
                            <div class="upload-group-item-text">宝贝图</div>
                        </div>
                    </div>
                </div>
<script type="text/javascript" charset="utf-8" src="${staticSite}/jui/plugins/webuploader/webuploader.js"></script>

var uploader = WebUploader.create({
    auto: true,
    // swf文件路径
    swf: '/js/third-party/webuploader/Uploader.swf',
    // 文件接收服务端。
    server: '/api/product/imgUpload',
    // 选择文件的按钮。可选。
    // 内部根据当前运行是创建,可能是input元素,也可能是flash.
    pick: '.upload-group-item',
    fileSingleSizeLimit: 1024*1024*4,//4MB
    // 只允许选择图片文件。
    accept: {
        title: 'Images',
        extensions: 'gif,jpg,jpeg,bmp,png',
        mimeTypes: 'image/*'
    }
});
// 当有文件添加进来的时候
uploader.on('fileQueued', function(file,n) {
});
uploader.on( 'uploadSuccess', function(file, data) {
    if(data.state == "ERROR"){
        alert("上传失败");
        return;
    }
    var $li = $(
            '<div id="' + file.id + '" class="file-item thumbnail">' +
            '<div class="info">' + file.name + '</div>' +
            '<img class="preview" />' +
            '</div>'
    ),
    $img = $li.find('img');
    $("#rt_"+file.getSource().ruid).css("zIndex",5);
    var $fileContainer = $("#rt_"+file.getSource().ruid).parent();
    $fileContainer.find(".file-item").remove();
    $fileContainer.append($li);


    var $file = $("#" + file.id);
    var $fileContainer = $file.parent();
    $file.find(".preview").attr( 'src', data.url);
    $fileContainer.find(".upload-group-option").remove();
    var $option = $('<div class="upload-group-option"><i class="ifont ifont-backwardfill"></i><i class="ifont ifont-shanchu"></i><i class="ifont ifont-forwardfill"></i></div>');
    $fileContainer.append($option);

    //移动位置
    var $left = $option.find(".ifont-backwardfill"), $right = $option.find(".ifont-forwardfill");
    $left.click(function(){
        var $prev = $fileContainer.prev();
        if($prev.length > 0){
            $fileContainer.insertBefore($prev);
        }
    });
    $right.click(function(){
        var $next = $fileContainer.next();
        if($next.length > 0){
            $next.insertBefore($fileContainer);
        }
    });

    //删除
    var $del = $option.find(".ifont-shanchu");
    $del.click(function(){
        $file.remove();
        $fileContainer.find(".upload-group-option").remove();
    });
});
uploader.on( 'uploadError', function( file ) {
    alert("上传错误");
});
.webuploader-container {
	position: relative;
}
.webuploader-element-invisible {
	position: absolute !important;
	clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px,1px,1px,1px);
}
.webuploader-pick {
	position: relative;
	display: inline-block;
	cursor: pointer;
	/*background: #00b7ee;*/
	/*padding: 10px 15px;*/
	/*color: #fff;*/
	text-align: center;
	border-radius: 3px;
	overflow: hidden;
}
.webuploader-pick-hover {
	/*background: #00a2d4;*/
}

.webuploader-pick-disable {
	opacity: 0.6;
	pointer-events:none;
}
.m-upload-group .ifont-jia {font-size:50px;position:relative;top:40px;}
.upload-group-item {display:inline-block;text-align: center;border:1px solid #DAD8D8;cursor: pointer;}
.upload-group-item:hover {border:1px solid #2d2d2d}
.upload-group-item .webuploader-pick{width:130px;height:130px;}
.upload-group-item .preview{width:100%;height:80px;}
.upload-group-item .file-item{position:absolute;z-index:1;top:0px;left:0px;width: 100%;height:100%;cursor: default}
.upload-group-item-text {position:absolute; bottom:0px;text-align: center;width: 100%;height:30px;line-height: 30px;}

.upload-group-option {width:100%;position:absolute;z-index:10;bottom:0px;left:0px;background: #fff}
.upload-group-option .ifont-backwardfill,
.upload-group-option .ifont-forwardfill,
.upload-group-option .ifont-shanchu{cursor: pointer;z-index: 10;}
.upload-group-option .ifont-backwardfill:hover,
.upload-group-option .ifont-forwardfill:hover,
.upload-group-option .ifont-shanchu:hover{color:#2d2d2d;font-weight: bold}
.upload-group-option .ifont-backwardfill{position:absolute;left:5px;}
.upload-group-option .ifont-forwardfill{position:absolute;right:5px;}
/**
	 * 上传文件
	 * @param multipartRequest
	 */
	@ResponseBody
	@RequestMapping(value = "/api/product/imgUpload")
	public Map imgUpload(MultipartHttpServletRequest multipartRequest) {
		String uid = "2016040710704843";
		if("webapp".equals(userFilePath)){
			userFilePath = multipartRequest.getServletContext().getRealPath("/");
		}
		FileUploadResponse fileUploadResponse = //上传部分自由实现

		Map<String, Object> resultMap = new HashMap<>();
		resultMap.put("url", fileUploadResponse.getFileInfo().getFilePath());
		resultMap.put("fileType", fileUploadResponse.getFileInfo().getFileType());
		resultMap.put("original", fileUploadResponse.getFileInfo().getFileName());
		if(fileUploadResponse.getStatus().equals("failt")){
			resultMap.put("state", "ERROR");
		}
		resultMap.put("state", "SUCCESS");
		return resultMap;
	}





© 著作权归作者所有

loowj
粉丝 23
博文 194
码字总数 145987
作品 0
上海
后端工程师
私信 提问
Python实现大文件分片上传(WebUploader)

引言 想借着这篇文章简要谈谈WebUploader大文件上传与Python结合的实现。 WebUploader是百度团队对大文件上传的前端实现,而后端需要根据不同的语言自己实现。这里我采用Python语言的Flask框...

hNicholas
2018/09/18
0
0
webuploader一次性上传多张图片到后台,后台如何处理

如题,我用webuploader上传图片,后台用springmvc,上传一张时没有问题,但一次性上传多张的时候,后台我就不知道怎么处理了,作为后台我不知道前端传来几张 这是前端页面代码 这是后台代码 ...

studyforjava
2016/07/26
12.2K
2
有什么最新的上传组件吗?支持大文件上传功能的!

我目前的项目做上传时使用的是webuploader的组件,虽然可以实现我要的功能,但是需要改动的太大太多,而且不是很灵活。有人说webuploader组件已经过时了,是这样吗?有没有新的好用的组件可以...

发动机法师
2017/10/23
177
4
大神们,谷歌浏览器53为什么点击上传图片要等很久

我用webuploader上传图片,以前谷歌浏览器版本没升级之前,一切正常。现在谷歌升级之后,点击上传按钮要等很久才弹出文件选择的弹窗。 其次,我用其他的浏览器,如火狐、IE、遨游等等,均没有...

漠沙
2016/10/26
882
2
使用webuploader时报错: Uncaught Error: jQuery or Zepto not found!

使用webuploader时报错:Uncaught Error: jQuery or Zepto not found! 请教大神这要怎么解决?我的代码如下,直接用的官网Getting Started的代码。 选择图片...

一个yuanbeth
2017/09/18
2.3K
2

没有更多内容

加载失败,请刷新页面

加载更多

CentOS7.6中安装使用fcitx框架

内容目录 一、为什么要使用fcitx?二、安装fcitx框架三、安装搜狗输入法 一、为什么要使用fcitx? Gnome3桌面自带的输入法框架为ibus,而在使用ibus时会时不时出现卡顿无法输入的现象。 搜狗和...

技术训练营
今天
3
0
《Designing.Data-Intensive.Applications》笔记 四

第九章 一致性与共识 分布式系统最重要的的抽象之一是共识(consensus):让所有的节点对某件事达成一致。 最终一致性(eventual consistency)只提供较弱的保证,需要探索更高的一致性保证(stro...

丰田破产标志
今天
7
0
docker 使用mysql

1, 进入容器 比如 myslq1 里面进行操作 docker exec -it mysql1 /bin/bash 2. 退出 容器 交互: exit 3. mysql 启动在容器里面,并且 可以本地连接mysql docker run --name mysql1 --env MY...

之渊
今天
7
0
python数据结构

1、字符串及其方法(案例来自Python-100-Days) def main(): str1 = 'hello, world!' # 通过len函数计算字符串的长度 print(len(str1)) # 13 # 获得字符串首字母大写的...

huijue
今天
5
0
PHP+Ajax微信手机端九宫格抽奖实例

PHP+Ajax结合lottery.js制作的一款微信手机端九宫格抽奖实例,抽奖完成后有收货地址添加表单出现。支持可以设置中奖概率等。 奖品列表 <div class="lottery_list clearfix" id="lottery"> ......

ymkjs1990
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部