多图上传 - Web Uploader

http://fex.baidu.com/webuploader/

官方DEMO，我都不想说了，各种问题。参考ShuaiBi文章

http://www.cnblogs.com/ismars/p/4176912.html

用了bootstrap 代码百度网盘地址：http://pan.baidu.com/s/1pJkj9wf

自己参照改改就好了。

            //所有文件上传完毕uploader.on("uploadAccept", function (file, response) {//console.info(file)//console.info(response.filePath)//----给头像赋值----$("#EditForm input[name='Header_Ico']").val("http://" + window.location.host + response.filePath);//提交表单//if (hasError) {//    // 通过return false来告诉组件，此文件上传有错。//    return false;//}});

为了页面不刷新，我只有采用这个手段了，JS渣的说。

            //开始上传$("#ctlBtn").click(function () {console.info(uploader)uploader.upload();return false;//页面不刷新});

问题1：

$(…).live("mouseout", function () not a function

<script src="~/Scripts/jquery.min.js"></script>

改为

<script src="~/Scripts/jquery-1.8.2.js"></script>

问题2：

上传3张图片，组成格式

中间以“,”隔开

p://localhost:28278/Upload/4039280d9d604a7dbdf85f3282d509a7.png,http://localhost:28278/Upload/120a5587e8bc43449c5ca13142145b05.png

代码：

// 文件上传成功，给item添加成功class, 用样式标记上传成功。uploader.on('uploadSuccess', function (file, response) {console.info(uploader.getStats())var temp = "http://" + window.location.host + response.filePath;//判断uploader.getStats().successNum状态（在uploadSuccess）if (uploader.getStats().successNum == 1) {//console.info(0)$("#EditForm input[name='photourl']").val(temp);} else {//console.info(1)$("#EditForm input[name='photourl']").val($("#EditForm input[name='photourl']").val() + "," + temp);}$('#' + file.id).addClass('upload-state-done');});

多图上传 - Web Uploader相关推荐

使用jQuery开发一个基于HTML5的漂亮图片拖拽上传web应用
昨天我们介绍了一款HTML5文件上传的jQuery插件:jQuery HTML5 uploader,今天我们将开发一个简单的叫upload center的图片上传程序,允许用户使用拖拽方式来上传电脑上 ...
php 多图上传编辑器,laravel中使用WangEditor及多图上传
1. 创建项目及安装所需安装包 1.1 创建项目 composer create-project laravel/laravel=5.3 blog_wangeditor --prefer-dist 1 ...
多图上传以及多图排序的方法及流程详解
多图上传以及多图排序的方法及流程详解 ps:本人亲测,阿里云2核4G5M的服务器性价比很高,新用户一块多一天,老用户三块多一天,最高可以买三年,感兴趣的可以戳一下:阿里云折扣服务器所用插件包打包下载 ...
Kindeditor.NET 实现多图上传保存
步骤1: 在KindEditor 文件夹 --plugins文件夹中添加 uploadimage 插件文件夹步骤2: 添加 uploadimage.js ,代码如下: KindEditor.plu ...
Bootstrap+PHP实现多图上传
插件及源代码可以在这里下载 http://www.jq22.com/jquery-info5231 下面是根据下载的demo进行补充: 使用bootstrap界面美观,可预览,可拖拽上传,可配合aja ...
SAE上传web应用(包括使用数据库)教程详解及问题解惑
2019独角兽企业重金招聘Python工程师标准>>> 转自:http://blog.csdn.net/baiyuliang2013/article/details/24725995 ...
微信jssdk，实现多图上传的一点心得
一.首先在common.js里封装一个函数,在需要调用jsSDK的页面引用此方法即可实现微信的信息配置function signatureJSSDK() { var url = window.loca ...
php多图上传插件ios,yii2组件之多图上传插件FileInput的详细使用
作者:白狼出处:http://www.manks.top/yii2_multiply_images.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连 ...
Bootstrap+PHP fileinput 实现多图上传这是ajax上传，只能单张单张图片地上传
插件及源代码可以在这里下载 http://www.jq22.com/jquery-info5231 下面是根据下载的demo进行补充: 使用bootstrap界面美观,可预览,可拖拽上传,可配合aja ...

多图上传 - Web Uploader

多图上传 - Web Uploader相关推荐

最新文章

热门文章