|
|
Posted on 2018-11-19 10:44 viery 阅读(1802) 评论(0) 编辑 收藏 所属分类: .net
 修改uplaod.js - 打开layui/modules/upload.js
- 搜索ajax
- 找到url:
- 添加以下代码：
,xhr:l.xhr(function(e){//此处为新添加功能 var percent=Math.floor((e.loaded / e.total)*100);//计算百分比 l.progress(percent);//回调将数值返回
5.upload.js 中 p.prototype.config也要改，加一个xhr的定义，否则传文件时如果不设xhr会报错。 accept:"images",exts:"",auto:!0,bindAction:"",url:"" ,field:"file",method:"post",data:{},drag:!0,size:0 ,xhr:function(){}//此处需要添加
 
1
2 [WebMethod(Description = "upload")]
3 [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
4 public void Upload()
5 {
6 Context.Response.Clear();
7 Context.Response.ContentType = "application/json";
8 var file = Context.Request.Files[0]; //获取选中文件
9 var filecombin = file.FileName.Split('.');
10 if (file == null || String.IsNullOrEmpty(file.FileName) || file.ContentLength == 0 || filecombin.Length < 2)
11 {
12 var errJson= JsonHelper.SerializeByJsonNet(new
13 {
14 fileid = 0,
15 src = "",
16 name = "",
17 msg = "上传出错 请检查文件名 或 文件内容"
18 });
19 Context.Response.Write(errJson);
20 }
21 //定义本地路径位置
22 string local = @"\UploadFile";
23 string filePathName = string.Empty;
24 string localPath = Path.Combine(HttpRuntime.AppDomainAppPath, local);
25
26 var tmpName = Server.MapPath("~/UploadFile/");
27 var tmp = file.FileName;
28 var tmpIndex = 0;
29 //判断是否存在相同文件名的文件 相同累加1继续判断
30 while (System.IO.File.Exists(tmpName + tmp))
31 {
32 tmp = filecombin[0] + "_" + ++tmpIndex + "." + filecombin[1];
33 }
34
35 //不带路径的最终文件名
36 filePathName = tmp;
37
38 if (!System.IO.Directory.Exists(localPath))
39 System.IO.Directory.CreateDirectory(localPath);
40 string localURL = Path.Combine(local, filePathName);
41 file.SaveAs(Path.Combine(tmpName, filePathName)); //保存图片（文件夹）
42 var tempJson= JsonHelper.SerializeByJsonNet(new
43 {
44 src = localURL.Trim().Replace("\\", "|"),
45 name = Path.GetFileNameWithoutExtension(file.FileName), // 获取文件名不含后缀名
46 msg = "上传成功"
47 });
48 Context.Response.Write(tempJson);
49 }
1 layui.use(['upload', 'element', 'layer'], function () {
2 var upload = layui.upload, element = layui.element, layer = layui.layer;
3 upload.render({
4 elem: '#test1'
5 , url: '/Servers/UploadFile.asmx/Upload'
6 , async: false
7 , method: 'post'
8 , auto: false
9 , xhr: xhrOnProgress
10 , progress: function (value) {//上传进度回调 value进度值
11 element.progress('demo1', value + '%')//设置页面进度条
12 }
13 , accept: 'file' //普通文件
14 , field: 'uploadFile'
15 , bindAction: '#uploadBtn'
16 , before: function (obj) {
17 //layer.load(); //上传loading
18 }
19 , done: function (res) {
20 layer.msg(res.msg);
21 }
22 , error: function (index, upload) {
23 element.progress('demo', '0%');
24 layer.msg(res.msg);
25 }
26 });
27 });
28
29 //创建监听函数
30 var xhrOnProgress = function (fun) {
31 xhrOnProgress.onprogress = fun; //绑定监听
32 //使用闭包实现监听绑
33 return function () {
34 //通过$.ajaxSettings.xhr();获得XMLHttpRequest对象
35 var xhr = $.ajaxSettings.xhr();
36 //判断监听函数是否为函数
37 if (typeof xhrOnProgress.onprogress !== 'function')
38 return xhr;
39 //如果有监听函数并且xhr对象支持绑定时就把监听函数绑定上去
40 if (xhrOnProgress.onprogress && xhr.upload) {
41 xhr.upload.onprogress = xhrOnProgress.onprogress;
42 }
43 return xhr;
44 }
45 }
<button type="button" class="layui-btn" id="test1">
<i class="layui-icon"></i>选择
</button>
<br />
<br />
<button type="button" class="layui-btn" id="uploadBtn">
<i class="layui-icon"></i>上传
</button>
<br />
<br />
<div id="uploadPatchForm" class="roundRect">
<div id="uploadLoadingDiv">
<div class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="demo1">
<div class="layui-progress-bar layui-bg-blue" lay-percent="0%"></div>
</div>
</div>
</div>
|