佚名 大家好，关于webuploader很多朋友都还不太明白，不知道是什么意思，那么今天我就来为大家分享一下关于webuploader不支持你的浏览器的相关知识，文章篇幅可能较长，还望大家耐心阅读，希望本篇文章对各位有所帮助！
1用webuploader怎么解决跨域上传文件的问题
跨域请求前浏览器会自动发出一个options请求，如果服务器的响应头部中有如下信息：
Access-Control-Allow-Origin: #允许访问的源，如
Access-Control-Allow-Methods: #允许的方谈乱睁法，如get, post
浏览器收到这个响含岁应就会继续原来的请求，否则就会终止。
在webuploader中可以在uploadBeforeSend的回调中设置请求的头部，例如
uploader.on('uploadBeforeSend', function(obj, data, headers) {
_.extend(headers, {
"Origin": "",
"Access-Control-Request-Method"陪闹: "POST"
});
});
在服务端的post响应中增加头部：Access-Control-Allow-Origin:
2web uploader怎么使用的
方法/培嫌步骤
使用webuploader页面如下
点击上传按钮，或者复制粘贴或者拖拉图片导下面区域里都可以上传图片
点击上传，java代码如雀前下。 servlet里的dopost方法
点击上传后，图片会存入你写入的文件夹里
需要注意的是，需要修改js文件请求后台的路径
前段代配岁手码如下，需要源码的可以回复。
3webuploader怎么添加文件入列表
具体如下 ：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
***
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
uploader = WebUploader.create({
auto: false,
// swf文件路径
swf: '/Scripts/悄圆滑webUploader/Uploader.swf',
// 文件接收服务端。
server: '@Url.Action("Upload", "Home")',
// 选择文件的按钮。可选。
// 内部根据当前运启腊行是创建，可能是input元素，腔并也可能是flash.
pick: '#myPicker',
// formData: { "name": name, "desc": desc},
prepareNextFile:true,
chunked: true, // 分片上传大文件
chunkRetry: 10, // 如果某个分片由于网络问题出错，允许自动重传多少次？
thread: 100,// 最大上传并发数
method: 'POST',
fileSizeLimit: 1024,
// 只允许选择图片文件。
accept: {
title: 'HTML5组态文件',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'img/*'
}
});
5
6
7
8
9
10
11
12
13
//当文件被加入队列之前触发
uploader.on('beforeFileQueued', function (file) {
//如果是单文件上传，把旧的文件地址传过去
if (!p.multiple) {
if (p.sendurl.indexOf("action=itemcode") 0) {
if ($("#txtItemCode").val() == '') {
layer.msg('请先填写商品编码再上传图片！');
//layer.alert('请先填写商品编码再上传图片！');
return false;
}
data.formData= { "name": name, "desc": desc};
}
}
});
uploader.on('fileQueued', function (file) {
$("#listFile").append('div id="' + file.id + '" class="c2c4-4410-8e90-6783 item"' +
'h4 class="4410-8e90-6783-0320 info"' + file.name + '/h4' +
'p class="8e90-6783-0320-29c7 state"等待上传.../p' +
'/div');
});
uploader.on('uploadProgress', function (file, percentage) {
var li = $('#' + file.id),
percent = li.find('.progress .progress-bar');
// 避免重复创建
if (!percent.length) {
percent = $('div class="6783-0320-29c7-e7b2 progress progress-striped active"' +
'div class="0320-29c7-e7b2-5411 progress-bar" role="progressbar" style="width: 0%"' +
'/div' +
'/div').appendTo(li).find('.progress-bar');
}
li.find('p.state').text('上传中');
percent.css('width', percentage * 100 + '%');
});
uploader.on('uploadSuccess', function (file) {
$('#' + file.id).find('p.state').text('已上传');
});
uploader.on('uploadError', function (file) {
$('#' + file.id).find('p.state').text('上传出错');
});
uploader.on('uploadComplete', function (file) {
$('#' + file.id).find('.progress').fadeOut();
//$("#editModal").fadeOut(2000, window.location.reload());
//destory();
//$("#editModal").destory();
});
//当某个文件的分块在发送前触发，主要用来询问是否要添加附带参数，大文件在开起分片上传的前提下此事件可能会触发多次。
uploader.on('uploadBeforeSend', function (obj, data, headers) {
// data.DelFilePath = parentObj.siblings(".upload-path").val();
// data.ItemCode = $("#txtItemCode").val();
data.formData= { "name": name, "desc": desc};
});
uploader.on('all', function (type) {
if (type === 'startUpload') {
state = 'uploading';
} else if (type === 'stopUpload') {
state = 'paused';
} else if (type === 'uploadFinished') {
state = 'done';
}
if (state === 'uploading') {
$('#btnBeginUpload').text('暂停上传');
} else {
$('#btnBeginUpload').text('开始上传');
}
});
} else {
geap.alertPostMsgDefault("请选择一个文件!", "info");
}
});
// 点击上传事件
$('#btnSave').bind('click', function () {
var name = $("#txtName").val();
var id = $("#txtId").val();
if (!name || name.length == 0) {
alert("请填写名称");
return false;
}
var obj = new Object();
obj.name = name;
obj.id = id;
uploader.options.formData = obj;
// uploader.options.formData = { "name": name, "id": id, };
if (state === 'uploading') {
uploader.stop();
} else {
uploader.upload();
}
});
4WebUploader踩坑
采坑点：滚橘和
1、大盯uploader.removeFile(fileid, true)：删除文件时需要带上第二个参数true，才代表从队列移除；
2、uploader.getFiles('inited').length：获取当前上传队列数量时，getFiles()需要带伍凳上‘inited’参数，才代表是初始状态的队列；
3、uploader.options.formData={}：设置json参数时这样才对；
5webuploader用java怎么接收
webuploader用java接收：
div id="uploader" class="5411-0298-f8b9-1e32 wu-example"
div class="0298-f8b9-1e32-cc6c queueList"
div id="dndArea" class="1e18-d735-fc03-8440 placeholder"
div id="filePicker"/div
p或将照片拖到迅瞎悔这里，亩正单次最多可选300张/p
/div
/div
div class="d735-fc03-8440-a6f9 statusBar" style="display: none;"
div class="fc03-8440-a6f9-097a progress"
span class="8440-a6f9-097a-c2c4 text"0%/span span class="a6f9-097a-c2c4-4410 percentage"/span
/div
div class="097a-c2c4-4410-8e90 info"/div神薯
div class="c2c4-4410-8e90-6783 btns"
div id="filePicker2"/div
div class="4410-8e90-6783-0320 uploadBtn"开始上传/div
/div
/div
/div
!-- webuploader --
link rel="stylesheet" type="text/css"
href="/static/js/webuploader/css.css"
link rel="stylesheet" type="text/css"
href="/static/js/webuploader/image.css"
script type="text/javascript" src="/static/js/webuploader/min.js"/script
script type="text/javascript"
src="/static/js/webuploader/upload-image.js"/script
Js代码
// 实例化
uploader = WebUploader.create({
pick: {
id: '#filePicker',
label: '点击选择图片'
},
dnd: '#uploader .queueList',
paste: document.body,
accept: {
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/*'
},
// swf文件路径
[color=red]swf: '/static/js/webuploader/Uploader.swf',[/color]
disableGlobalDnd: true,
chunked: true,
server: '/point/image/bulk.html',
fileNumLimit: 300,
fileSizeLimit: 50*1024*1024,//5M
fileSingleSizeLimit: 5*1024*1024 //1M
});
上传文件和普通的spring一样
Java代码
@RequestMapping("/bulk")
@ResponseBody
public String bulk(HttpServletRequest request, MultipartFile file) {
String path = super.uploadFile(request, "file", true);
return "1";
}
引用
Spring MVC3.2开始支持通过Servlet3.0实现文件上传
Xml代码
bean id="multipartResolver"class="8e90-6783-0320-29c7 org.springframework.web.multipart.support.StandardServletMultipartResolver"/bean
关于webuploader的内容到此结束，希望对大家有所帮助。
