精华内容
下载资源
问答
  • 主要介绍了webuploader 实现图片批量上传功能,非常不错,具有参考借鉴价值,需要的朋友可以参考下
  • 这样前段就基本完成了,然后修改一下upload.js文件里的内容,实现将后端传来的id,随着图片上传而传到后端formData实在初始化的时候赋值,这个时候我们的隐藏域中还没有值,所有要给webuploader添加一个事件监听这样...

    jsp页面:

    1.官网下载文件


    2.将index.html里面的引用和dom结构复制到自己的jsp页面中,如图:



    3.这样前段就基本完成了,然后修改一下upload.js文件里的内容,实现将后端传来的id,随着图片上传而传到后端


    formData实在初始化的时候赋值,这个时候我们的隐藏域中还没有值,所有要给webuploader添加一个事件监听


    这样后面uid的值就会覆盖formData里面uid的值,至此前端就算完了,下面来看看后端怎么接手

    springmvc接参

    1.先上图

    2.上一下结果图


    是不是拿到数据之后就简单多了呀!!!

    自己照着api文档弄的,如果你在处理过程中遇到问题,欢迎留言讨论。。。



    展开全文
  • --图片上传--> <script src="../../../lib/webuploader/webuploader.js" type="text/javascript"></script> <script src="../../../js/uploader.js" type="text/javascript">&...

    上传图片

    加载js文件

    <!--图片上传-->
        <script src="../../../lib/webuploader/webuploader.min.js" type="text/javascript"></script>
        <script src="../../../js/uploader.js" type="text/javascript"></script>
    

    webuploader.min.js
    uploader.js
    Uploader.swf

    初始化

    <script type="text/javascript">
            $(function () {
                $(".upload-album").InitUploader({
                    btntext: "批量上传",
                    multiple: true,
                    water: true,
                    thumbnail: true,
                    filesize: "102400",
                    sendurl: "upload_ajax.ashx",
                    swf: "Uploader.swf" 
                });
            });
        </script>
    

    放图片的div

    <div class="layui-form-item">
        <label class="layui-form-label">
            图片上传</label>
        <div class="layui-input-block">
            <div class="upload-box upload-album">
            </div>
            <input name="hidFocusPhoto" type="hidden" id="Hidden1" class="focus-photo" />
            <div class="photo-list" id="photolist">
                <ul>
                </ul>
            </div>
        </div>
    </div>
    

    js代码

    <script type="text/javascript">
    layui.use('form', function () {
        var form = layui.form;
        //监听提交
        form.on('submit(component-form-demo1)', function (data) {
            ///图片集合
            var imglist = ""; //图片路径列表
            var testimg = $("#photolist input[name^='hid_photo_name']");
            for (var i = 0; i < testimg.length; i++) {
                imglist += testimg[i].value + ",";
            }
            $.ajax({
            	//传到后台的代码
            });
        });
    });        
    </script>
    

    更新图片

    放图片的容器

    <div class="layui-form-item">
        <label class="layui-form-label">
            图片上传</label>
        <div class="layui-input-block">
            <div class="upload-box upload-album">
            </div>
            <input name="hidFocusPhoto" type="hidden" id="Hidden1" class="focus-photo" />
            <div class="photo-list" id="photolist">
                <ul>
                    <asp:Repeater ID="rptAlbumList" runat="server">
                        <ItemTemplate>
                            <li>
                                <input type="hidden" name="hid_photo_name" value="<%#Eval("id")%>|<%#Eval("fileurl")%>|<%#Eval("remark")%>|<%#Eval("filename")%>" />
                                <input type="hidden" name="hid_photo_remark" value="<%#Eval("filename")%>" />
                                <div class="img-box" onclick="setFocusImg(this);">
                                    <a class="example-image-link" href="<%#Eval("fileurl")%>" data-lightbox="example-set">
                                        <img class="example-image 0" src="<%#Eval("remark")%>" width="112" height="112" />
                                    </a>
                                </div>
                                <a href="javascript:;" onclick="delImg(this);">删除</a> </li>
                        </ItemTemplate>
                    </asp:Repeater>
                </ul>
            </div>
        </div>
    </div>
    

    cs代码(获取之前上传的图片)

    IList<Models.ytj_file> list = new BLL.ytj_file().GetModelList(" fileid='" + Mod.logo + "'");
    rptAlbumList.DataSource = list;
    rptAlbumList.DataBind();
    

    初始化、js代码同上传

    展开全文
  • webuploader批量上传

    千次阅读 2017-02-20 09:17:38
     图片上传  <!--dom结构部分-->    <!--用来存放item-->  <div id="fileList" class="uploader-list"></div>  <div id="upInfo" ></div>  选择文件    开始上传"> // 图片上传demo...

    这是前台界面

    <%@ page language="java" contentType="text/html; charset=utf-8"
        pageEncoding="utf-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
    <%
        String path = request.getContextPath();
        String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
                + path + "/";
    %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Insert title here</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/webuploader.css" />
        <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.2.min.js"></script>
        <script type="text/javascript" src="${pageContext.request.contextPath}/js/webuploader.min.js"></script>
    </head>
     <h3>图片上传</h3>
            <!--dom结构部分-->
        <div id="uploader-demo">
            <!--用来存放item-->
            <div id="fileList" class="uploader-list"></div>
            <div id="upInfo" ></div>
            <div id="filePicker">选择文件</div>
        </div>
        <input type="button" id="btn" value="开始上传">

    <script>
    // 图片上传demo
    jQuery(function() {
        var $ = jQuery,
            $list = $('#fileList'),
            // 优化retina, 在retina下这个值是2
            ratio = window.devicePixelRatio || 1,
            // 缩略图大小
            thumbnailWidth = 100 * ratio,
            thumbnailHeight = 100 * ratio,
            // Web Uploader实例
            uploader;
            // 初始化Web Uploader
            uploader = WebUploader.create({
            // 自动上传。
            auto: false,
            // swf文件路径
            swf:'../js/Uploader.swf',
            // 文件接收服务端。使用spring对应后台action
            server: 'uploader',
            threads:'5',        //同时运行5个线程传输
            fileNumLimit:'10',  //文件总数量只能选择10个

            // 选择文件的按钮。可选。
            pick: {id:'#filePicker',  //选择文件的按钮
                    multiple:true},   //允许可以同时选择多个图片
         // 图片质量,只有type为`image/jpeg`的时候才有效。
            quality: 90,

            //限制传输文件类型,accept可以不写
            accept: {
                title: 'Images',//描述
                extensions: 'jpg,jpeg,bmp,png',//类型
                mimeTypes: 'image/*'//mime类型
            }
        });


     // 当有文件添加进来的时候,创建img显示缩略图使用
        uploader.on( 'fileQueued', function( file ) {
            var $li = $(
                    '<div id="' + file.id + '" class="file-item thumbnail">' +
                        '<img>' +
                        '<div class="info">' + file.name + '</div>' +
                    '</div>'
                    ),
                $img = $li.find('img');

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

            // 创建缩略图
            // 如果为非图片文件,可以不用调用此方法。
            // thumbnailWidth x thumbnailHeight 为 100 x 100
            uploader.makeThumb( file, function( error, src ) {
                if ( error ) {
                    $img.replaceWith('<span>不能预览</span>');
                    return;
                }

                $img.attr( 'src', src );
            }, thumbnailWidth, thumbnailHeight );
        });

     // 文件上传过程中创建进度条实时显示。    uploadProgress事件:上传过程中触发,携带上传进度。 file文件对象 percentage传输进度 Nuber类型
        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, 用样式标记上传成功。 file:文件对象,    response:服务器返回数据
        uploader.on( 'uploadSuccess', function( file,response) {
            $( '#'+file.id ).addClass('upload-state-done');
            //console.info(response);
          $("#upInfo").html("<font color='red'>"+response._raw+"</font>");
        });

        // 文件上传失败                                file:文件对象 , code:出错代码
        uploader.on( 'uploadError', function(file,code) {
            var $li = $( '#'+file.id ),
                $error = $li.find('div.error');

            // 避免重复创建
            if ( !$error.length ) {
                $error = $('<div class="error"></div>').appendTo( $li );
            }

            $error.text('上传失败!');
        });

        // 不管成功或者失败,文件上传完成时触发。 file: 文件对象
        uploader.on( 'uploadComplete', function( file ) {
            $( '#'+file.id ).find('.progress').remove();
        });

        //绑定提交事件
        $("#btn").click(function() {
            console.log("上传...");
            uploader.upload();   //执行手动提交
            console.log("上传成功");
          });

    });
    </script>
    </body>
    </html>

    这是webuploader.css

    .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;
    }
    
    


    展开全文
  • 详细请查看:https://blog.csdn.net/qq_22146195/article/details/103779432
  • 因为新公司的一个项目是涉及到房产中介管理系统,所以需要提供用户批量上传图片的功能。于是在网上找到了webuploader插件,调用这个api功能。 WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,...

         这个功能是我来新公司做的第一个工作。因为新公司的一个项目是涉及到房产中介管理系统,所以需要提供用户批量上传图片的功能。于是在网上找到了webuploader插件,调用这个api功能。

    WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流IE浏览器,沿用原来的FLASH运行时,兼容IE6+,iOS 6+, android 4+。两套运行时,同样的调用方式,可供用户任意选用。
    采用大文件分片并发上传,极大的提高了文件上传效率。

            WebUploader插件的优点:

    1、分片、并发
    分片与并发结合,将一个大文件分割成多块,并发上传,极大地提高大文件的上传速度。当网络问题导致传输错误时,只需要重传出错分片,而不是整个文件。另外分片传输能够更加实时的跟踪上传进度。

    2、预览、压缩
    支持常用图片格式jpg,jpeg,gif,bmp,png预览与压缩,节省网络数据传输。解析jpeg中的meta信息,对于各种orientation做了正确的处理,同时压缩后上传保留图片的所有原始meta数据。

    3、多途径添加文件
    支持文件多选,类型过滤,拖拽(文件&文件夹),图片粘贴功能。粘贴功能主要体现在当有图片数据在剪切板中时(截屏工具如QQ(Ctrl + ALT + A), 网页中右击图片点击复制),Ctrl + V便可添加此图片文件。

    4、HTML5 & FLASH
    兼容主流浏览器,接口一致,实现了两套运行时支持,用户无需关心内部用了什么内核。同时Flash部分没有做任何UI相关的工作,方便不关心flash的用户扩展和自定义业务需求。

    5、MD5秒传
    当文件体积大、量比较多时,支持上传前做文件md5值验证,一致则可直接跳过。如果服务端与前端统一修改算法,取段md5,可大大提升验证性能,耗时在20ms左右。

    6、易扩展、可拆分
    采用可拆分机制, 将各个功能独立成了小组件,可自由搭配。采用AMD规范组织代码,清晰明了,方便高级玩家扩展。

    主要步骤

    1、使用Web Uploader文件上传需要引入三种资源:JS, CSS, SWF。
    <!--引入CSS-->
    <link rel="stylesheet" type="text/css" href="webuploader文件夹/webuploader.css">
    <!--引入JS-->
    <script type="text/javascript" src="webuploader文件夹/webuploader.js"></script>


    2、文件上传
    WebUploader只包含文件上传的底层实现,不包括UI部分。所以交互方面可以自由发挥,以下将演示如何去实现一个简单的版本。

    Html部分
    首先准备dom结构,包含存放文件信息的容器、选择按钮和上传按钮三个部分。

    <div id="uploader" class="wu-example">
        <!--用来存放文件信息-->
        <div id="thelist" class="uploader-list"></div>
        <div class="btns">
            <div id="picker">选择文件</div>
            <button id="ctlBtn" class="btn btn-default">开始上传</button>
        </div>
    </div>

    初始化Web Uploader
    具体说明,请看一下代码中的注释部分。

    var uploader = WebUploader.create({
        // swf文件路径
        swf: BASE_URL + '/js/Uploader.swf',
        // 文件接收服务端。
        server: 'http://webuploader.duapp.com/server/fileupload.php',
        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建,可能是input元素,也可能是flash.
        pick: '#picker',
        // 不压缩image, 默认如果是jpeg,文件上传前会压缩一把再上传!
        resize: false
    });


    当时在测试的时候,有两个问题,就是手机上传图片,有些浏览器无法实现图片预览,主要是一些安卓手机系统,这个问题还有待寻求解决方案,一个是当用户批量上传图片时,因为webuploader插件是并发上传图片和文件的,所以文件和图片上传是可以同时进行上传,但是在后台将路径存储到数据库时,是属于一条条记录上传,而当代码对其进行数量限制时,一旦数量到达极限,程序就调出不再执行,返回不再执行上传。

    具体事例代码我会在以后陆续放出。

    WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流IE浏览器,沿用原来的FLASH运行时,兼容IE6+,iOS 6+, android 4+。两套运行时,同样的调用方式,可供用户任意选用。
    采用大文件分片并发上传,极大的提高了文件上传效率。


        

    Web Uploader

    WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流IE浏览器,沿用原来的FLASH运行时,兼容IE6+,iOS 6+, android 4+。两套运行时,同样的调用方式,可供用户任意选用。

    采用大文件分片并发上传,极大的提高了文件上传效率。

    Web Uploader

    WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流IE浏览器,沿用原来的FLASH运行时,兼容IE6+,iOS 6+, android 4+。两套运行时,同样的调用方式,可供用户任意选用。

    采用大文件分片并发上传,极大的提高了文件上传效率。

    展开全文
  • webuploader主要用来做文件的上传,支持批量上传图片预览,图片预览是将图片生成base64数据直接在标签中使用,所以能够达到的效果是未真正上传图片可以先看到上传的效果。更多具体的介绍,可以上webuploader的官方...
  • 主要为大家详细介绍了WebUploader客户端批量上传图片,后台使用springMVC接收实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 转自:点击打开链接使用WebUploader客户端批量上传图片,后台使用springMVC接收实例我是搞java后台的,因为最近主管让用webUploader写客户端,但是在网上找了很多,能够复制就能用的并没有几个,但是经过修改后还...
  • 在一个网站中图片上传通畅是一个非常常用的功能。不论是头像的展示亦或是作品的展示...所以我们用到了webuploader来做图片批量上传的功能。以下是代码。html代码片段:<!--弹出遮罩层--> <divclass="zpz...
  • webuploader demo

    千次下载 热门讨论 2016-07-06 22:43:25
    webuploader 多文件上传
  • 使用webuploader插件实现图片批量上传图片上传时显示进度条,图片上传至文件夹,并且支持将图片路径保存到数据库
  • webuploader主要用来做文件的上传,支持批量上传图片预览,图片预览是将图片生成base64数据直接在标签中使用,所以能够达到的效果是未真正上传图片可以先看到上传的效果。更多具体的介绍,可以上webuploader的官方...
  • 各位想必是在百度下载webuploader后,看官方的demo并没有看明白才搜到这里来的吧。 我也是,我将搜索的结果做了整理,大家互相学习进步。
  • 实现一个页面有多个上传图片入口,可以支持多张图片同时上传,并有预览。与普通文件上传相比,此处演示了:文件过滤,图片预览,图片压缩上传等功能。
  • WEB版一次选择多个图片进行批量上传(WebUploader)的解决方案
  • 本人在2010年时使用swfupload为核心进行文件的批量上传的解决方案。见文章:WEB版一次选择多个文件进行批量上传(swfupload)的解决方案。  本人在2013年时使用plupload为核心进行文件的批量上传的解决方案。见文章...
  • php结合web uploader插件实现分片上传文件, 图片批量上传,非常好用
  • js怎么设置服务端指定的java中的方法,是在server中设置,还是url中? 从前端的jsp中js的设置参数,到java中方法怎么接收,中间的业务流程是怎么样的,复制党就不要来了,我网上看了一大堆了,我有帮助文件就是看不...
  • 初始上传界面 //链接添加弹窗 html代码段↓ var msgcontent = ""; msgcontent += '<ul class="linkAddBox">'; msgcontent += '<li><p class="Z_pHOTOtIPS p10" style="margin-top:0;d...
  • 已经付费购买的图片批量上传工具,可以在Web页面一次批量上传多张图片,可以直接从word中拷贝然后粘贴上传,尤其对于word中的数学公式,可以自动转为图片上传到web服务器,非常方便。
  • 关于什么时候发现这个问题的:项目中有个新增的功能并且需要上传图片,然后发现新增成功之后,图片缺少了几张。 图片上传的一个流程是等新增完数据成功之后返回图片资源id,用作于该数据与图片的一个联系。因为业务...
  • 一个批量上传文件的demo,能实现批量上传并显示缩略图,对每个文件实现自动命名并上传至指定路径。采用webuploader插件,自己对js和css进行了一定程度的封装。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,053
精华内容 421
热门标签
关键字:

webuploader批量上传图片