關於layui圖片/檔案上傳

阿新 • • 發佈：2018-11-11

一：常規使用普通檔案上傳（傳入伺服器一張圖片）

1.前臺程式碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link href="../layui/css/layui.css" rel="stylesheet" />
<title></title>
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>常規使用：普通圖片上傳</legend>
</fieldset>

<div class="layui-upload">
<button type="button" class="layui-btn" id="test1">上傳圖片</button>
<div class="layui-upload-list">
<img class="layui-upload-img" id="demo1">
<p id="demoText"></p>
</div>
</div>
<script src="../layui/jquery-3.3.1.js"></script>
<script src="../layui/layui.js"></script>
<script>
layui.use('upload', function () {
var upload = layui.upload;
//普通圖片上傳
var uploadInst = upload.render({
//這裡url就是你上傳圖片的介面
//before是上傳圖片之前的回撥，就是將圖片展示出來啦
//done就是完成圖片上傳後的回撥
//error就是上傳發生錯誤的回撥，比如你要上傳的伺服器不存在要儲存圖片的資料夾就會觸發error回撥
elem: '#test1'
, url: '/UploadFile/ashxjiekou/upload.ashx'
, before: function (obj) {
//預讀本地檔案示例，不支援ie8
obj.preview(function (index, file, result) {
$('#demo1').attr('src', result);
});

}
, done: function (res) {
//這裡回撥函式的引數res就是介面返回的資料
//alert(JSON.stringify(res.data.src))
//如果上傳失敗
if (res.code > 0) {
return layer.msg('上傳失敗');
}
layer.msg('上傳成功')
}
, error: function () {
//演示失敗狀態，並實現重傳
var demoText = $('#demoText');
demoText.html('<span style="color: #FF5722;">上傳失敗</span> <a class="layui-btn layui-btn-xs demo-reload">重試</a>');
demoText.find('.demo-reload').on('click', function () {
uploadInst.upload();
});
}
});
})
</script>
</body>
</html>

這裡前臺程式碼都是完整的考的你的編輯器就可以用了當然引用的jquery 和 layui路徑要改成你自己相應的路徑

2.接下來我們看後臺ashx介面，後臺也考個完整的把看起來量多（但其實沒什麼好說的）

using Newtonsoft.Json.Linq;
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;

namespace UploadLearning.UploadFile.ashxjiekou
{
/// <summary>
/// upload 的摘要說明
/// </summary>
public class upload : IHttpHandler
{
JObject json = new JObject();
JObject rtn = new JObject();
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/json";
HttpFileCollection files = context.Request.Files;
string path = "/upImage";
checkDir(path);
if (files.Count > 0)
{
files[0].SaveAs(context.Server.MapPath("/upImage/" + files[0].FileName + ".jpg"));
//context.Response.Write(Newtonsoft.Json.JsonConvert.SerializeObject(new { msg = "ok" }, Newtonsoft.Json.Formatting.Indented));
rtn.Add("src", "upImage/" + files[0].FileName + ".jpg");
json.Add(new JProperty("code", 0));
json.Add(new JProperty("msg", ""));
json.Add(new JProperty("data", rtn));
}
context.Response.Write(json.ToString());
context.Response.End();
}

public bool IsReusable
{
get
{
return false;
}
}

#region 檢查指定目錄是否存在,如不存在則建立
/// <summary>
/// 檢查指定目錄是否存在,如不存在則建立
/// </summary>
/// <param name="url"></param>
/// <returns></returns>
public void checkDir(string url)
{
if (Directory.Exists(System.Web.HttpContext.Current.Server.MapPath(url)) == false)
{
Directory.CreateDirectory(System.Web.HttpContext.Current.Server.MapPath(url));
}
}
#endregion
}
}

3.普通圖片上傳總結：

普通圖片上傳就這樣了，其中後臺用到了類HttpFileCollection，這個類用於獲取瀏覽器上傳的檔案集合。。。請注意是集合。其它就沒什麼注意的啦

二：上傳多張圖片

1.多圖片上傳前臺程式碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link href="../layui/css/layui.css" rel="stylesheet" />
<script src="../layui/jquery-3.3.1.js"></script>
<title></title>
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>常規使用：普通圖片上傳</legend>
</fieldset>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>上傳多張圖片</legend>
</fieldset>

<div class="layui-upload">
<button type="button" class="layui-btn" id="test2">多圖片上傳</button>
<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
預覽圖：
<div class="layui-upload-list" id="demo2"></div>
</blockquote>
</div>

}
, done: function (res) {
//這裡回撥函式的引數res就是介面返回的資料
//alert(JSON.stringify(res.data.src))
//如果上傳失敗
if (res.code > 0) {
return layer.msg('上傳失敗');
}
layer.msg('上傳成功')
}
, error: function () {
//演示失敗狀態，並實現重傳
var demoText = $('#demoText');
demoText.html('<span style="color: #FF5722;">上傳失敗</span> <a class="layui-btn layui-btn-xs demo-reload">重試</a>');
demoText.find('.demo-reload').on('click', function () {
uploadInst.upload();
});
}
});
var s = "";
//多圖片上傳
upload.render({
elem: '#test2'
, url: '/UploadFile/ashxjiekou/tupianshangchuanduo.ashx'
, multiple: true
, before: function (obj) {
//預讀本地檔案示例，不支援ie8
obj.preview(function (index, file, result) {
$('#demo2').append('<img src="' + result + '" alt="' + file.name + '" class="layui-upload-img">')
});
}
, done: function (res) {
//上傳完畢
alert(JSON.stringify(res));
if (s == "") {
s = JSON.stringify(res.data.src);
}
else {
s = s + "," + JSON.stringify(res.data.src);
}
alert(s)
}
});

})
</script>
</body>
</html>

2.多圖片上傳後臺介面

using Newtonsoft.Json.Linq;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace UploadLearning.UploadFile.ashxjiekou
{
/// <summary>
/// tupianshangchuanduo 的摘要說明
/// </summary>
public class tupianshangchuanduo : IHttpHandler
{
JObject json = new JObject();
JObject rtn = new JObject();
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/json";
HttpFileCollection files = context.Request.Files;
string path = "/tupianshangchuanduo";
checkDir(path);
string s = string.Empty;
if (files.Count > 0)
{
files[0].SaveAs(context.Server.MapPath("/tupianshangchuanduo/" + files[0].FileName + ".jpg"));
//context.Response.Write(Newtonsoft.Json.JsonConvert.SerializeObject(new { msg = "ok" }, Newtonsoft.Json.Formatting.Indented));
rtn.Add("src", "upImage/" + files[0].FileName + ".jpg");
json.Add(new JProperty("code", 0));
json.Add(new JProperty("msg", ""));
json.Add(new JProperty("data", rtn));
}
context.Response.Write(json.ToString());
context.Response.End();
}

public bool IsReusable
{
get
{
return false;
}
}

#region 檢查指定目錄是否存在,如不存在則建立
/// <summary>
/// 檢查指定目錄是否存在,如不存在則建立
/// </summary>
/// <param name="url"></param>
/// <returns></returns>
public void checkDir(string url)
{
if (System.IO.Directory.Exists(System.Web.HttpContext.Current.Server.MapPath(url)) == false)
{
System.IO.Directory.CreateDirectory(System.Web.HttpContext.Current.Server.MapPath(url));
}
}
#endregion
}
}

3.多圖片上傳總結：

多圖片上傳這個介面的呼叫要注意，其實他是多個程序一起一起工作的所以說我們的HttpFileCollection類物件並沒有被遍歷我最開始的思考就是多圖片是一次傳了很多上來在通過遍歷實現儲存，但並不是這樣。

三：高階應用：製作一個多檔案列表

1.多檔案上傳html

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>上傳多張圖片</legend>
</fieldset>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>高階應用：製作一個多檔案列表</legend>
</fieldset>

<div class="layui-upload">
<button type="button" class="layui-btn layui-btn-normal" id="testList">選擇多檔案</button>
<div class="layui-upload-list">
<table class="layui-table">
<thead>
<tr>
<th>檔名</th>
<th>大小</th>
<th>狀態</th>
<th>操作</th>
</tr>
</thead>
<tbody id="demoList"></tbody>
</table>
</div>
<button type="button" class="layui-btn" id="testListAction">開始上傳</button>
</div>

//多檔案列表示例
var demoListView = $('#demoList')
, uploadListIns = upload.render({
elem: '#testList'
, url: '/UploadFile/ashxjiekou/duowenjianList.ashx'
, accept: 'file'
, multiple: true
, auto: false
, bindAction: '#testListAction'
, choose: function (obj) {
var files = this.files = obj.pushFile(); //將每次選擇的檔案追加到檔案佇列
//讀取本地檔案
obj.preview(function (index, file, result) {
var tr = $(['<tr id="upload-' + index + '">'
, '<td>' + file.name + '</td>'
, '<td>' + (file.size / 1014).toFixed(1) + 'kb</td>'
, '<td>等待上傳</td>'
, '<td>'
, '<button class="layui-btn layui-btn-xs demo-reload layui-hide">重傳</button>'
, '<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">刪除</button>'
, '</td>'
, '</tr>'].join(''));

//單個重傳
tr.find('.demo-reload').on('click', function () {
obj.upload(index, file);
});

//刪除
tr.find('.demo-delete').on('click', function () {
delete files[index]; //刪除對應的檔案
tr.remove();
uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免刪除後出現同名檔案不可選
});

demoListView.append(tr);
});
}
, done: function (res, index, upload) {
if (res.code == 0) { //上傳成功
var tr = demoListView.find('tr#upload-' + index)
, tds = tr.children();
tds.eq(2).html('<span style="color: #5FB878;">上傳成功</span>');
tds.eq(3).html(''); //清空操作
return delete this.files[index]; //刪除檔案佇列已經上傳成功的檔案
}
this.error(index, upload);
}
, error: function (index, upload) {
var tr = demoListView.find('tr#upload-' + index)
, tds = tr.children();
tds.eq(2).html('<span style="color: #FF5722;">上傳失敗</span>');
tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //顯示重傳
}
});

})
</script>
</body>
</html>

2.多檔案上傳後臺介面

using Newtonsoft.Json.Linq;
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;

namespace UploadLearning.UploadFile.ashxjiekou
{
/// <summary>
/// duowenjianList 的摘要說明
/// </summary>
public class duowenjianList : IHttpHandler
{
JObject json = new JObject();
JObject rtn = new JObject();

public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/json";
HttpFileCollection files = context.Request.Files;
string path = "/upduowenjianList";
checkDir(path);
if (files.Count > 0)
{
files[0].SaveAs(context.Server.MapPath("/upduowenjianList/" + files[0].FileName + ".jpg"));
//context.Response.Write(Newtonsoft.Json.JsonConvert.SerializeObject(new { msg = "ok" }, Newtonsoft.Json.Formatting.Indented));
rtn.Add("src", "upImage/" + files[0].FileName + ".jpg");
json.Add(new JProperty("code", 0));
json.Add(new JProperty("msg", ""));
json.Add(new JProperty("data", rtn));
}
context.Response.Write(json.ToString());
context.Response.End();
}

public bool IsReusable
{
get
{
return false;
}
}

3.多檔案上傳總結：其他都大同小異。唯一需要注意的是加入上傳的檔案太大會發生錯誤：System.Web.HttpException: 超過了最大請求長度。這是因為asp.net預設限制最大上傳檔案大小為4096KB，需要修改專案的web.config檔案即可解決，可以將最大檔案長度設定為你需要的長度如下：

如此以上問題就可以解決了

關於layui圖片/檔案上傳

關於layui圖片/檔案上傳

圖片檔案上傳示例

SpringMVC篇：轉發與重定向、圖片檔案上傳、Json（jackson）

javaweb實現圖片檔案上傳

tp3.2+layui ajax檔案上傳(直接上程式碼)

圖片檔案上傳（上面一篇是預覽）

Struts2配合layui多檔案上傳--下載

圖片檔案上傳

在Selenium 利用AutoIt實現圖片檔案上傳

egg-ueditor，基於egg的UEditor百度編輯器後端實現，支援圖片/檔案上傳、列表及圖片遠端抓取

layui框架檔案上傳 + TP3.2.3 檔案上傳後臺處理（php）

nodejs處理圖片檔案上傳

.Net Core 圖片檔案上傳下載

base64轉為圖片檔案上傳到伺服器

layui 實現檔案上傳

springMVC圖片檔案上傳功能的實現

Layui多檔案上傳進度條

layui 富文字圖片上傳介面與普通按鈕檔案上傳介面

Java Springboot結合FastDFS實現檔案上傳以及根據圖片url將圖片上傳至圖片伺服器

SpringBoot圖片上傳(三)——呼叫檔案上傳專案的方法(同時啟動兩個專案)

關於layui圖片/檔案上傳

相關推薦