利用layui前端框架實現對不同文件夾的多文件上傳

問題場景：

普通的input標簽實現多文件上傳時，只能對同一個文件夾下的多個文件進行上傳，如果要同時上傳兩個或多個文件夾下的文件，是無法實現的。這篇文章就是利用layui中的插件，解決這個問題。

普通多文件上傳標簽：

前端 運用layui

操作步驟：
1、進入layui首頁，下載整個組件
2、下載完成后,把名字為layui的文件夾放到你的項目中進行引用
3、引用layui.js和layui.css實現功能
4、可點擊可進入layui文件上傳實例的官方網址進行參考，來以上三步的前端代碼實現

HTML代碼塊：

<div class="layui-upload"><button type="button" class="layui-btn layui-btn-normal"style="margin-left: 30px"id="testList">選擇多文件</button><button type="button" class="layui-btn" id="testListAction"style="display: inline; margin-left: 26px;">開始上傳</button><div class="layui-upload-list col-md-12"><table class="layui-table" style="margin: 0 0 0 0"><thead style="display: none"><tr><th>文件名</th><th>大小</th><th>狀態</th><th>操作</th></tr></thead><tbody id="demoList"></tbody></table></div> </div>

JS代碼塊

<script>layui.use('upload', function () {var $ = layui.jquery, upload = layui.upload;//多文件列表示例var demoListView = $('#demoList'), uploadListIns = upload.render({elem: '#testList', url: '/task_mgm/taskinfo_upload', 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>

Python后端 代碼塊

UPLOAD_FOLDER = 'static_files/task_mgm/' # 設置允許上傳的文件類型 ALLOWED_EXTENSIONS = set(['txt', 'png', 'jpg', 'xls', 'JPG', 'PNG', 'xlsx', 'gif', 'GIF', 'ppt', 'pptx', 'doc', 'docx', 'csv', 'sql', 'py','rar'])# 用于判斷文件后綴 def allowed_file(filename):return '.' in filename and filename.rsplit('.', 1)[1] in ALLOWED_EXTENSIONS@task_mgm.route('/taskinfo_upload',method=['post']) @login_required def taskINfo_upload_fun():if request.method == 'POST':# 上傳文件的鍵名是fileif 'file' not in request.files:logging.debugp('No file part')return jsonify({'code': -1, 'filename':'', 'msg':'No file part'})# 獲取文件對象file = request.files['file']# 若用戶沒有選擇文件就提交，提示‘No selected file’if file.filename == '':logging.debug('No selected file')return jsonify({'code': -1', 'filename':'', 'msg':'No selected file'})else:try:if file and allowed_file(file.filename):origin_file_name = file.filenamelogging.debug('filename is %s' % origin_file_name)file_dir = os.path.join(os.getcwd(), UPLOAD_FOLDER)if os.path.exists(file_dir):logging.debug('%s path exist' % file_dir)passelse:logging.debug('%s path not exist' % file_dir)os.makedirs(file_dir)file.save(os.path.join(file_dir, filename))return jsonify({'code':0, 'filename':origin_file_name, 'msg': 'save successfully'})else:logging.debug('%s not allowed' % file.filename)return jsonify({'code':-1, 'filename':'', 'msg': 'File not allowed'})except Exception as e:logging.debug(e)return jsonify({'code':-1, 'filename':'', 'msg':'Error occurred'})else:return jsonify({'code':-1, 'filename': '', 'msg':'Method not allowed'})

---

下面簡單展示一下效果圖：

到此為止，前后端代碼都有了，可以粘去直接使用！！！！

轉載于:https://www.cnblogs.com/We612/p/10621230.html

總結

以上是生活随笔為你收集整理的利用layui前端框架实现对不同文件夹的多文件上传的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。