test eng

test_eng.html

@@ -25,6 +25,7 @@
       .input-sec {
         box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
         -webkit-box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
+        position: relative;
       }
       .upload-cta.box-active {
         height: 80px;
@@ -33,6 +34,9 @@
         background-repeat: no-repeat;
         border-radius: 1rem;
       }
+      #msform .img-inputTest {
+        text-align: end;
+      }
     </style>
 </head>
 
@@ -408,18 +412,15 @@
             console.log(jsonData.msg);
             $(this).prev().val(jsonData.msg);
             const nextEl = event.target.nextSibling;
-            nextEl.innerHTML = '';
-            nextEl.textContent = 'Upload';
-            nextEl.nextSibling.classList.add('box-active');
-            nextEl.nextSibling.style.backgroundImage = `url(http://${jsonData.msg})`;
+            nextEl.style.backgroundImage = `url(https://cdn2.ettoday.net/images/6017/d6017847.jpg)`;
             //console.log($(this).next());
             //$(this).next().html('上傳檔案');
             //$(this).next().text('上傳檔案');
           },
           error: function (error) {
-            event.target.nextSibling.innerHTML = '';
-            event.target.nextSibling.textContent = 'Upload';
-            alert('Error');
+            const nextEl = event.target.nextSibling;
+            nextEl.style.backgroundImage = `url(./img/upload_img.png)`;
+            alert('Image Error');
           }
         });
       }
@@ -610,7 +611,7 @@
           subtitleinput.classList.add('subsrc', `subsrc${i+1}`);
           subtitleinput.value = historyItem.text_content[i];
           subtitleinput.setAttribute('placeholder', `Subtitle`);
-          subtitleinput.style.width = "100%";
+          subtitleinput.style.width = "80%";
           input_sec.appendChild(subtitleinput);
 
           // text input
@@ -620,7 +621,7 @@
           txtinput.classList.add('txtsrc', `txtsrc${i+1}`);
           txtinput.value = historyItem.text_content[i];
           txtinput.setAttribute('placeholder', `Line`);
-          txtinput.style.width = "100%";
+          txtinput.style.width = "80%";
           input_sec.appendChild(txtinput);
 
           // img url input
@@ -650,10 +651,10 @@
           imgupload.addEventListener('change', prepareUpload);
 
           // preview image
-          var imgPreBox = document.createElement("div");
-          imgPreBox.classList.add('upload-cta', 'box-active');
-          imgPreBox.style.backgroundImage = `url(${historyItem.image_urls[i]})`;
-          img_box.appendChild(imgPreBox);
+          // var imgPreBox = document.createElement("div");
+          // imgPreBox.classList.add('upload-cta', 'box-active');
+          // imgPreBox.style.backgroundImage = `url(${historyItem.image_urls[i]})`;
+          // img_box.appendChild(imgPreBox);
 
           input_sec.appendChild(img_box);
           document.querySelector('.img-inputTest').append(input_sec);
@@ -743,7 +744,7 @@
         var imguploadlabel = document.createElement("label");
         imguploadlabel.setAttribute('for', `img${i}`);
         imguploadlabel.classList.add('upload-btn');
-        imguploadlabel.textContent = 'Upload';
+        // imguploadlabel.textContent = 'Upload';
         imgInputs.appendChild(imguploadlabel);
         $('input[type=file]').on('change', prepareUpload);
       }
@@ -762,7 +763,7 @@
         subtitleinput.classList.add('subsrc', `subsrc${i}`);
         subtitleinput.value = "";
         subtitleinput.setAttribute('placeholder', `Subtitle`);
-        subtitleinput.style.width = "100%";
+        subtitleinput.style.width = "80%";
         input_sec.appendChild(subtitleinput);
 
         // text input
@@ -772,7 +773,7 @@
         txtinput.classList.add('txtsrc', `txtsrc${i}`);
         txtinput.value = "";
         txtinput.setAttribute('placeholder', `Line`);
-        txtinput.style.width = "100%";
+        txtinput.style.width = "80%";
         input_sec.appendChild(txtinput);
 
         // img url input
@@ -796,15 +797,15 @@
         var imguploadlabel = document.createElement("label");
         imguploadlabel.setAttribute('for', `img${i}`);
         imguploadlabel.classList.add('upload-btn');
-        imguploadlabel.textContent = 'Upload';
+        // imguploadlabel.textContent = 'Upload';
         imguploadlabel.setAttribute('set-lan', `html:upload_file`);
         img_box.appendChild(imguploadlabel);
         imgupload.addEventListener('change', prepareUpload);
 
         // preview image
-        var imgPreBox = document.createElement("div");
-        imgPreBox.classList.add('upload-cta');
-        img_box.appendChild(imgPreBox);
+        // var imgPreBox = document.createElement("div");
+        // imgPreBox.classList.add('upload-cta');
+        // img_box.appendChild(imgPreBox);
 
         input_sec.appendChild(img_box);
         document.querySelector('.img-inputTest').append(input_sec);