สอบถาม js ถ้าจะแสดงข้อความต้องเขียนต่อ string อย่างไร

[eange08]

javascript ถ้าต้องการแสดงชื่อไฟล์หรือข้อความแบบในรูปจะต้องเขียนให้ต่อ string แบบในภาพอย่างไรบ้างค่ะ
ตัวหนังสือสีแดงที่ต้องการให้แสดง

screenshot-bpconcjcammlapcogcnnelfmaeghhagj-2020.12.30-15_36_44.png (20.31 KiB) Viewed 1400 times

code ที่แสดงในส่วนของ list

โค้ด: เลือกทั้งหมด

add: function (e, data) { 
 	var before_size=formatFileSize(data.files[0].size);
	var before_file_name=data.files[0].name;
	if (!data.files[0].name.match(/.(jpg|jpeg|png|webp,png)$/i)){
		var checktype='N';
	}else{
		var checktype='Y';
	}
    
            var tpl = $('<li class="working"><input type="text" value="0" data-width="48" data-height="48"'+
                ' data-fgColor="#0788a5" data-readOnly="1" data-bgColor="#fff" /><p></p><span></span></li><input type="hidden" name="hdd_filenm_'+row+'" id="hdd_filenm_'+row+'" value="'+before_file_name+'"><input type="hidden" id="hdd_file_size_'+row+'" name="hdd_file_size_'+row+'">'); //แสดงตัว process วงกลม

            // แสดงชื่อไฟล์กับ file size
            tpl.find('p').text(data.files[0].name)
                 .append('<i>' + formatFileSize(data.files[0].size) + '</i>');
	    
            // Add the HTML to the UL element
            data.context = tpl.appendTo(ul);

            // Initialize the knob plugin
            tpl.find('input').knob();

            // Listen for clicks on the icons.png to remove
            tpl.find('span').click(function(){

                if(tpl.hasClass('working')){
                    jqXHR.abort();
                }

                tpl.fadeOut(function(){
                    tpl.remove();
                });

            });

            // Automatically upload the file once it is added to the queue
            var jqXHR = data.submit();
	    row=parseInt(row)+1;
        },

[mindphp]

ตัวอย่างการเขียน update row ข้อมูลใน HTML หน้าหลัก
จากข้อมูลจาก Ajax ที่อัพโหลด ภาพ หรือไฟล์ ที่อัพขึ้นมาในบอร์ด

assets/javascript/plupload.js?assets_version=317

[eange08]

ตอนนี้เข้าใจและทำได้แล้วนะคะ โดยจะแบ่งเป็น 2 ส่วนคือ 1. แสดงหน้าจอ 2. ส่วนที่อ้างอิง id / input ข้อ 1
ไฟล์ script.js
ส่วนที่ 1 เป็นส่วนที่เราเห็นในหน้าจอ ใส่แท๊ก HTML แต่ใน div เราก็ใส่ id ไว้เราจะไปใช้กับส่วนที่ 2

โค้ด: เลือกทั้งหมด

 var tpl = $('<li class="working"><input type="text" value="0" data-width="50" data-height="50"'+
                ' data-fgColor="#0788a5" data-readOnly="1" data-bgColor="#fff" /><div class="row"><div class="col-md-4"><p></p></div><div class="col-md-4" id="aft"></div><div class="col-md-4"><span></span></div></div></li><input type="hidden" name="hdd_filenm_'+row+'" id="hdd_filenm_'+row+'" value="'+before_file_name+'"><input type="hidden" id="hdd_file_size_'+row+'" name="hdd_file_size_'+row+'">');

ส่วนที่ 2 ไฟล์

โค้ด: เลือกทั้งหมด

// Append the file name and file size
            tpl.find('p').text(data.files[0].name)  //-----แสดงชื่อรูปที่ <div class="col-md-4"><p></p></div>
                 .append('<i>' + formatFileSize(data.files[0].size) + '</i>');   //-----แสดงขนาดไฟล์โดยจะสร้างแท๊ก <i></i>  อยู่ใน <div class="col-md-4"><p><i></i></p></div>
	
	    tpl.find('#aft').text(data.files[0].name)  //-----แสดงชื่อรูปที่ <div class="col-md-4" id="aft"></div>
               .append('<i>' + formatFileSize(data.files[0].size) + '</i>');  //-----แสดงขนาดไฟล์โดยจะสร้างแท๊ก <i></i>  อยู่ใน <div class="col-md-4" id="aft"><i></i></div>
	  
	
            // Add the HTML to the UL element
            data.context = tpl.appendTo(ul); //----คำสั่งไปแสดงบนหน้าจออีกที

ผลลัพท์ที่ได้

screenshot-localhost-2020.12.30-18_57_33.png (21.16 KiB) Viewed 1385 times