Most of the original information written by many bloggers from Baidu is their crystallization. Thank you again
The purpose of writing this blog post is to make a record for yourself, which is convenient for future use
Paste the front code first
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Product characteristics Form</title>
<link href="~/Content/Base/layui/css/layui.css" rel="stylesheet" type="text/css" />
<script src="~/Content/Base/layui/layui.js" type="text/javascript"></script>
<script src="../../../../Content/Views/js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="../../../../Content/Views/js/framework-ui.js" type="text/javascript"></script>
<style>
@*table
{
height: 150px;
}
.layui-form-label
{
width: 100px;
}*@
</style>
</head>
<body>
<div style="width:100%;">
<div class="layui-upload">
<button type="button" class="layui-btn layui-btn-normal" id="testList">Select multiple files</button>
<div class="layui-upload-list">
<table class="layui-table" id="tableFile">
<thead>
<tr><th>file name</th>
<th>Size</th>
<th>state</th>
<th>operation</th>
</tr></thead>
<tbody id="demoList"></tbody>
</table>
</div>
<button type="button" class="layui-btn" id="testListAction">Start uploading</button>
</div>
</div>
<script>
function getModelName() {
var url = location.search; //Get the string after the "? Character in the url
var theRequest = new Object();
if (url.indexOf("?") != -1) {
var str = url.substr(1);
strs = str.split("&");
for (var i = 0; i < strs.length; i++) {
theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
}
}
return theRequest;
};
var parentUrlObj = getModelName();
var FileType = decodeURI(escape(parentUrlObj['filetype']));
var ModelId = decodeURI(escape(parentUrlObj['modelId']));
var NodeId = decodeURI(escape(parentUrlObj['nodeid']));
var ProductId = decodeURI(escape(parentUrlObj['productid']));
layui.use(['form', 'upload'], function () {
var form = layui.form,
upload = layui.upload;
var demoListView = $('#demoList')
, uploadListIns = upload.render({
elem: '#testList'
, url: '/ModelList/uploadNodeAttributeFile?filetype=' + FileType + '&modelid=' + ModelId + '&nodeid=' + NodeId + '&productid=' + ProductId
, accept: 'file'
, multiple: true
, auto: false
, bindAction: '#testListAction'
, choose: function (obj) {
var files = this.files = obj.pushFile(); //Append each selected file to the file queue
//Read local file
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>Waiting for uploading</td>'
, '<td>'
, '<button class="layui-btn layui-btn-mini demo-reload layui-hide">Retransmission</button>'
, '<button class="layui-btn layui-btn-mini layui-btn-danger demo-delete">delete</button>'
, '</td>'
, '</tr>'].join(''));
//Single retransmission
tr.find('.demo-reload').on('click', function () {
obj.upload(index, file);
});
//delete
tr.find('.demo-delete').on('click', function () {
delete files[index]; //Delete the corresponding file
tr.remove();
uploadListIns.config.elem.next()[0].value = ''; //Clear the input file value to avoid that the file with the same name is not optional after deletion
});
demoListView.append(tr);
});
}
, done: function (res, index, upload) {
if (res.Status == "success") {
var tr = demoListView.find('tr#upload-' + index), tds = tr.children();
tds.eq(2).html('<span style="color: #5fb878; "> upload succeeded < / span > ');
return null;
} else {
if (res.Message == "file already exist") {
var tr = demoListView.find('tr#upload-' + index), tds = tr.children();
tds.eq(2).html('<span style="color: #5fb878; "> upload failed, file already exists < / span > ');
return null;
} else {
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; "> upload failed < / span > ');
tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //Display retransmission
}
});
});
function heightTiao(nameid) {
var oIframe = window.top.document.getElementById(nameid);
var oBody = document.getElementsByTagName("body")[0];
oIframe.style.height = oBody.offsetHeight + 40 + 'px';
};
</script>
</body>
</html>
C × back end receiving code
HttpFileCollection hfc = System.Web.HttpContext.Current.Request.Files;
string str1 = AppDomain.CurrentDomain.SetupInformation.ApplicationBase;
string imgPath = "";
string fileName = "";
fileName = hfc[0].FileName;
imgPath = Server.MapPath("~/bin/" + fileName);
imgPath = Server.MapPath("~/bin/" + modelId + "/" + productid + "/" + nodeid + "/" + filetype + "/" + fileName);
hfc[0].SaveAs(imgPath);
return Content(new AjaxResult { Status = ResultType.success, Message = "Successful implementation" }.ToJson());
What should be noted in the specific use process
auto: false
bindAction: '#testListAction'
These two parameters are mainly set to specify a button to perform the upload action instead of uploading when you select a file
If you need to select a file, you need to upload it. You only need to set auto to true and remove the bindAction parameter
For other parameters, please refer to the documents on the official website of layui
Uploading files requires a lot of judgment, just a simple record of an example for your future use
There are some shortcomings, please give me some advice. Mutual communication