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的更多相关文章

  1. C# WEB.API 多图上传

    using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Ne ...

  2. PHP 多图上传,图片批量上传插件,webuploader.js,百度文件上传插件

    PHP  多图上传,图片批量上传插件,webuploader.js,百度文件上传插件(案例教程) WebUploader作用:http://fex.baidu.com/webuploader/gett ...

  3. hdjs---laravel 框架使用hdjs 实现多图上传功能

    hdjs---laravel 框架使用hdjs 实现多图上传功能 一.总结 一句话总结: [在网上找hdjs的使用实例]和[能遇见讲hdjs的视频],也是完全搞懂hdjs的不错的方式 1.hdjs中的 ...

  4. Webuploader 简单图片上传 支持多图上传

    简介: 通过webuploader 实现简单的图片上传功能,支持多张图上传 官方文档传送门:http://fex.baidu.com/webuploader/getting-started.html# ...

  5. JS案例之4——Ajax多图上传

    近期项目中有好几次用到多图上传,第一次在项目中真正用到Ajax技术,稍微整理了下,贴个案例出来. 我们传统的做法是当用户提交一个表单时,就向web服务器端发送一个请求.服务器接受并处理传来的表单信息, ...

  6. ueditor编辑器多图上传为什么顺序打乱了

    我上一个版本用的是ueditor1.3.6,自从1.4.2版以后,“前端上传模块统一改用webuploader”,ueditor在多图上传一直考虑漏掉了图片顺序的问题. 我的网站在用户上传图片文章的时 ...

  7. Vue的移动端多图上传插件vue-easy-uploader

    原文地址 前言 这段时间赶项目,需要用到多文件上传,用Vue进行前端项目开发.在网上找了不少插件,都不是十分满意,有的使用起来繁琐,有的不能适应本项目.就打算自己折腾一下,写一个Vue的上传插件,一劳 ...

  8. 利用html5的FormData对象实现多图上传

    <html> <head> <title>FormData多图上传演示</title> </head> <body> <a ...

  9. onethink多图上传

    模板处理, 可以参考 checkbox 的. 注:edit 方法的 基本一样,需要先把已有的数据展示出来,绑定双击事件,删除图片 需要先绑定给已经展示出来的图片, uploadPicture 的cal ...

随机推荐

  1. 应用alter index ××× monitoring usage;语句监控索引使用与否

    随着时间的累积,在没有很好的规划的情况下,数据库中也许会存在大量长期不被使用的索引,如果快速的定位这些索引以便清理便摆在案头.我们可以使用"alter index ××× monitorin ...

  2. JavaScript——同源策略

    概念:同源策略是客户端脚本(尤其是Javascript)的重要的安全度量标准.它最早出自Netscape Navigator2.0,其目的是防止某个文档或脚本从多个不同源装载.   这里的同源指的是: ...

  3. Wijmo 5 与Breeze 的组合,及与METRONIC 的集成

    1.Wijmo 5  是支持ANGULARJS 的HTML5 控件   http://wijmo.gcpowertools.com.cn/ 官方试用版  C1Wijmo-Eval_5.20151.42 ...

  4. 快速搭建VPN服务器

    http://www.ttlsa.com/linux/centos-install-pptp-vpn/

  5. springMVC中文乱码问题

    1)中文JSP页面编码统一为UTF-8后,页面可以正常显示,但从数据库中获取的数据依然显示乱码(比如下拉表单的数据): 2)当使用了springMVC提供的编码Filter拦截处理后,表单数据.从数据 ...

  6. ios 跟踪UITextField更改的简单方法

    如图,用xib链接,用到的消息是Editing Changed 消息.

  7. ABAP 行列稳定刷新语句

    DATA stbl TYPE lvc_s_stbl. stbl-row = 'X'." 基于行的稳定刷新         stbl-col = 'X'." 基于列稳定刷新      ...

  8. 士兵杀敌(三)_RMQ(区间最值查询)

    士兵杀敌(三) 时间限制:2000 ms  |  内存限制:65535 KB 难度:5   描述 南将军统率着N个士兵,士兵分别编号为1~N,南将军经常爱拿某一段编号内杀敌数最高的人与杀敌数最低的人进 ...

  9. Enum:Fliptile(POJ 3279)

    Fliptile 题目大意:农夫想要测牛的智商,于是他把牛带到一个黑白格子的地,专门来踩格子看他们能不能把格子踩称全白 这一题其实就是一个枚举题,只是我们只用枚举第一行就可以了,因为这一题有点像开关一 ...

  10. Hadoop 分布式文件系统:架构和设计

    引言 Hadoop分布式文件系统(HDFS)被设计成适合运行在通用硬件(commodity hardware)上的分布式文件系统.它和现有的分布式文件系统有很多共同点.但同时,它和其他的分布式文件系统 ...