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
91
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="item">' +
'<h4 class="info">' + file.name + '</h4>' +
'<p class="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="progress progress-striped active">' +
'<div class="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()
}
})
asp.net的服务器端的自己重新写一个服务，下载下来的是一个php的写的，将下载的代码进行如下修改(这里使用的是demo中的image-upload)：首先，找到109行的代码
var
swf
=
'./expressInstall.swf'修改为您的地址
//修改您的flash地址var
swf
=
'./Scripts/webuploader-0.1.5/examples/image-upload/expressInstall.swf'其次，找到151行，在实例化的时候修改用于上传flash的地址：
swf:
'../../dist/Uploader.swf',修改为
swf:
'./Scripts/webuploader-0.1.5/dist/Uploader.swf',第三，找到154行，将图片上传地址修改为.net的一般处理程序的请求地址
server:
'../../server/fileupload.php',修改为您的一般处理程序地址
server:
'./server/fileupload.ashx',第四，找到260行修改预览的服务器代码地址(我没有写不影响文件上传)
$.ajax('../../server/preview.php',
{修改为您的一般处理程序的预览地址
$.ajax('./server/preview.ashx',
{好了，到这里我们将upload.js修改完成了。
下面就是写了处理程序了，在项目中创建一个server文件夹并添加以下两个文件fileupload.ashx和preview.ashx。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）