|
|
Posted on 2018-11-19 10:44 viery 閱讀(1814) 評論(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>
|