2 baidu 31118981 baidu_31118981 于 2016.04.08 15:18 提问

Html Webuploader 拖拽上传没有效果

<!doctype html>







Document
<link rel="stylesheet" type="text/css" href="D:/web/webuploader/webuploader.css" />

<link rel="stylesheet" type="text/css" href="D:/web/webuploader/uploadstyle.css" />

<script type="text/javascript" src="D:/web/webuploader/upjquery.js"></script>

<script type="text/javascript" src="D:/web/webuploader/webuploader.js"></script>

<script type="text/javascript" src="D:/web/webuploader/upload.js"></script>


uploader = WebUploader.create({ auto: true, // swf文件路径 swf:'D:\web\webuploader\Uploader.swf', // 文件接收服务端。 server: 'http://webuploader.duapp.com/server/fileupload.php', // 选择文件的按钮。可选。 // 内部根据当前运行是创建,可能是input元素,也可能是flash. pick: '#filePicker', // 只允许选择图片文件。 accept: { title: 'Images', extensions: 'gif,jpg,jpeg,bmp,png', mimeTypes: 'image/*' } }); // 当有文件添加进来的时候 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 ); });
                    <p>或将照片拖到这里,单次最多可选9张,单个文件大小不超过2M</p>

                </div>

            </div>

            <div class="statusBar" style="display:none;">

                <div class="progress">

                    <span class="text">0%</span>

                    <span class="percentage"></span>

                </div><div class="info"></div>

                <div class="btns">

                    <div id="filePicker2"></div><div class="uploadBtn">发表</div>

                </div>

            </div>

        </div>

        </div>

2个回答

devmiao
devmiao   Ds   Rxr 2016.04.08 15:22
CSDNXIAOD
CSDNXIAOD   2016.04.08 15:34

HTML5拖拽上传简单效果
----------------------biu~biu~biu~~~在下问答机器人小D,这是我依靠自己的聪明才智给出的答案,如果不正确,你来咬我啊!

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
Thinkphp拖拽上传文件-使用webuploader插件(自己稍微改动了一些地方)——不切片上传
在拖拽或选择上传会遇到上传文件大小限制问题——如果文件很大,可以做切片,也可以不做切片,如果不做切片,文件太大,可能会上传失败,因为“WAMP数据库上传文件的大小及上传时间会受限制”,可以进行一下操作: 在php.ini文件中查找以下内容:   “max_execution_time =" 数值改为 1200  “max_input_time =  ”   数值改为 1200   “mem
Thinkphp拖拽上传文件-使用webuploader插件(自己改动了一些地方)——分片上传
html页面: Thinkphp拖拽上传文件-使用webuploader插件
HTML5拖拽上传文件,chrome文件夹上传
最近被安排做一个拖拽上传和文件夹上传的功能,不考虑兼容性,哈哈这个可以用HTML5实现。这里就不仔细学习HTML5,我只是想找例子,然后偷过来用,至于原理边用边学。   首先这里有一个很好的实例实现拖拽上传:http://blogs.sitepointstatic.com/examples/tech/filedrag/1/index.html 仔细看完估计原理你也会懂的。
最新thinkphp5整合webuploader,可预览拖拽搜索删除
thinkphp5整合webuploader,封装成上传组件。 WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流IE浏览器,沿用原来的FLASH运行时,兼容IE6+,iOS 6+, android 4+。两套运行时,同样的调用方式,可供用户任意选用。采用
同一个页面使用webuploader实现多实例多上传案例
项目上遇到一个需求,要实现一个页面有多个上传图片入口,我们使用的是webuploader上传组件;研究了一下终于弄好了这个功能,主要是动态获取上传按钮id和需要展现缩略图的元素id获取元素;保存供以后需要的时候直接用:1:首先引入所需要的css和js&amp;lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;webuploader/webuploader.css...
webuploader解决不能重复上传问题
uploader = WebUploader.create({ swf: 'resources/js/webuploader-0.1.5/Uploader.swf', // 文件接收服务端。 server: settings.url, // 选择文件的按钮。可选。 // 内部根据当前运行是创建,可能是inpu
WebUploader 解决文件多次上传和删除上传文件的问题
文件多次上传有两种情况:1. 上传前的多次选择2. 上传成功后,再次选择 其实API上,已经有了介绍了,不知道为什么有同学还是不知道如何做,我来抛砖引玉吧。配置项:duplicate {Boolean} [可选] [默认值:undefined] 去重, 根据文件名字、文件大小和最后修改时间来生成hash Key.将dupliacate设置为true,  允许文件多次上传其实有了这个配置就可以了,不...
webuploader批量上传
这是前台界面     pageEncoding="utf-8"%>     String path = request.getContextPath();     String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()     
webuploader-功能强大的HTML5上传组件
WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流IE浏览器,沿用原来的FLASH运行时,兼容IE6+,iOS 6+, android 4+。两套运行时,同样的调用方式,可供用户任意选用。 采用大文件分片并发上传,极大的提高了文件上传效率。 主页
WebUploader单页多实例实现
WebUploader是前端实现上传文件的一个控件,可以实现分片上传,跟踪进度,拖拽上传,图片的预览与压缩,拖拽,过滤,多选,黏贴等添加文件方式的可拓展UI组件1,需求-单页多实例:一个公司List页面,有一个Table,行项目是各个公司数据 每行都有一个上传的按钮,用于上传本公司下的文件 (需求是先选择图片,再通过点击上传按钮完成上传,故WebUploader控件配置为非立即上传) 2,粗糙的实现