blog

layuiマルチファイルアップロード、データから送信する

// ファイルオブジェクトの保存 var = []; // 添付ファイルのアップロード var = ({ elem: '#'...

May 31, 2020 · 2 min. read

//ファイルオブジェクトを保存する var attachmentArray = []; //添付ファイルをアップロードする var uploadInst = upload.render({ elem: '#updataFile' ,auto: false ,accept: 'file' ,exts: 'docx|doc|pptx|ppt|pdf' ,multiple: true // // ,bindAction: '#submitUploadCon' ,choose: function(obj){ UPLOAD_FILES = this.files = obj.pushFile(); //選択した各ファイルをファイル・キューに追加する obj.preview(function(index, file, result){ attachmentArray.push(file); $('.courseFiles').append('<div id="container'+index+'"> <span>'+file.name + '</span><a class="layui-btn layui-btn-danger layui-btn-xs attachment-remove" data-index="' + (attachmentArray.length - 1) + '" id="del_'+index+'"> </a></div>') $("#del_" + index).bind('click', function () { // layer.confirm('本当に写真を削除したいのか??',function(){ attachmentArray.splice($(this).data("index"),1) $("#container"+index).remove(); console.log('attachmentArray',attachmentArray); // }) }); }); //からデータを入稿する form.on('submit(submitcourse)', function(data){ var loading= layer.load(); // dataMsg = data.field , dataMsg.fileName = $('.files').html() //アップロードできるファイルは1つだけである // var uploadData = new FormData($("#addcourseForm")[0]) // console.log('uploadData',uploadData) var uploadData = new FormData(); //ctrlまたはshiftを押して連続して選択する。 // var files = $(".layui-upload input[type='file']"); // for (var i = 0; i < files[0].files.length; i++) { // uploadData.append("file", files[0].files[i]); // } //シングルチョイス for (var i = 0; i < attachmentArray.length; i++) { uploadData.append("file", attachmentArray[i]); } uploadData.append('id', $("#courseID").val()) uploadData.append('courseCode', courseCodes) uploadData.append('courseName', $("#courseName").val()) uploadData.append('shareScope', $("#shareScope").val()) uploadData.append('hours', $("#hours").val()) uploadData.append('introduction', $("#introduction").val()) uploadData.append('remarks', $("#remarks").val()) $.ajax({ url :addressURL+'/cegtCourseMng/saveCourseMng', type : 'POST', data : uploadData, processData: false, // jQuery送信されたデータを処理しない contentType: false, // jQueryContent-Typeリクエストヘッダをわざわざ設定する必要はない。 success : function(data) { //console.log("ハハハハ」。,data) if(data.code== '005'){ layer.alert(data.msg) layer.close(uploadingCon) layer.close(loading) location.reload(); $(".files").html('') uploadInst.config.elem.next()[0].value = '' $("input[name='file']").remove() table.reload('courseTable', { page: { curr: 1 //リスタート 1ページ目より } }); }else{ layer.close(loading) layer.alert(data.msg) } } }) })
Read next

6-refの使用

ある時点で、コンポーネントやDOMタグを操作するためにjsで直接アクセスする必要があるかもしれません。この目的を達成するために、Vueは、this.$refs.ref属性値を通してアクセスできる、現在のサブコンポーネントまたはタグへのid参照を与えるref属性を提供します。

May 31, 2020 · 1 min read