Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 108,603

HOME > PHP > PHP Forum > สอบถามเรื่อง Multiple array upload image drop zone ครับ



 

สอบถามเรื่อง Multiple array upload image drop zone ครับ

 



Topic : 135856



โพสกระทู้ ( 4,083 )
บทความ ( 7 )

Hall of Fame 2012

สถานะออฟไลน์




รบกวนสอบถามเรื่อง Drop zone upload file นิดนึงครับ

พอดีผมต้องการ upload Drag and Drop (JQuery) มากกว่า 1 ไฟล์ในเวลาเดียวกัน และต้องการ rename ชื่อไฟล์เพื่อไม่ให้ชื่อ file ทั้งหมดที่ Drag and Drop ซ้ำกัน และเพื่อกันไม่ให้ชื่อซ้ำ file เก่าที่มีอยู่
Logic ที่ผมใช้ตอนนี้คือ ให้ไป insert แต่ละไฟล์ลงฐานข้อมูล และดึง id(primary) มาทำการ rename file เพื่อให้ชื่อไฟล์แต่ละตัวไม่ซ้ำกัน

แต่ส่วนตัวที่ผมทำผมคิดว่ามันดูซับซ้อนเกินความจำเป็น มันพอมีวิธีมั้ยครับที่จะให้ทั้ง 3 ไฟล์ ที่ upload พร้อมกัน gen ชื่อออกมาไม่ให้เหมือนกัน โดยไม่ referance DB (ทั้งนี้ผมใช้ Hiss) แล้วไม่ได้ผลครับ



Tag : PHP, MySQL, jQuery, Node.js, Laravel Framework







Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2021-01-22 14:52:15 By : Genesis™ View : 111 Reply : 5
 

 

No. 1



โพสกระทู้ ( 4,203 )
บทความ ( 8 )



สถานะออฟไลน์


ผมมี class upload
มันจะทำการอัพไม่ให้ชื่อซ้ำกันได้โดยใช้วิธีเพิ่ม _n ตัวเลขไปเรื่อยๆ เช่น aa.jpg ถ้ามีก็เป็น aa_1.jpg aa_2.jpg ไปเรื่อยๆ

https://github.com/Rundiz/upload






แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2021-01-22 17:58:03 By : mr.v
 


 

No. 2



โพสกระทู้ ( 4,083 )
บทความ ( 7 )

Hall of Fame 2012

สถานะออฟไลน์


ตอบความคิดเห็นที่ : 1 เขียนโดย : mr.v เมื่อวันที่ 2021-01-22 17:58:03
รายละเอียดของการตอบ ::
ขอบคุณสำหรับตัวอย่างครับ

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2021-01-23 08:14:18 By : Genesis™
 

 
ตัวนี้เป็น Web API .NET Core 3.1 เป็นแค่ต้นแบบ ทำเอาไว้แต่ผมไม่ได้ใช้งานแล้ว
กรณีหลายฯรูปก็แค่ใส่ For เข้าไป

(ใช้ Node.js ก็เยี่ยมยอดเหมือนกันนะ มันสุดยอดเลยไอ้ Node.js)

Code (C#)
    public partial class ConstructionController : ControllerBase
    {
        [HttpGet]
        [Route("GetBOQ_WorkProcessImageFileExists")]
        public async Task<IActionResult> GetBOQ_WorkProcessImageFileExists(string filename) {
            var wpiPath = Utils.GetWorkingProcess_FileUploadPath();//.Replace(@"/", @"\");
            var isExists = Utils.FileExists(wpiPath + filename);
            await Task.Delay(0);
            return Ok(isExists);
        }

        /// <summary>
        /// Single Image Upload file.
        /// </summary>
        /// <returns></returns>
        [HttpPost]
        [Route("UploadWorkProcess_Image")]
        public async Task<IActionResult> UploadWorkProcess_Image() {
            ApiMessage results = new ApiMessage();
            var httpPostedFile = HttpContext.Request.Form.Files["file"]; // IFormFile
            var ProjectCode = HttpContext.Request.Form["projectcode"]; //
            var Site_Code = HttpContext.Request.Form["site_code"]; // 
            var DigSeq = HttpContext.Request.Form["digseq"]; // 
            var FileName = HttpContext.Request.Form["filename"]; // 
            var FileType = HttpContext.Request.Form["filetype"]; // 
            var FileSize = HttpContext.Request.Form["filesize"]; // 
            var ImageSource = HttpContext.Request.Form["imagesource"]; // 
            var sp = Utils.GetWorkingProcess_FileUploadPath(); // wwwroot/imgSEX/workingprocess/
            var fileName = Path.GetFileNameWithoutExtension(httpPostedFile.FileName);
            var fileExtention = Path.GetExtension(httpPostedFile.FileName); // .jpg, .png, etc
            var UniqFilName = DateTime.Now.ToString("yyyyMMddHHmmss"); //20201231083059 ระดับวินาที
            if (httpPostedFile != null) {
                try {
                    await httpPostedFile.SaveAsAsync(sp + fileName + UniqFilName + "f." + fileExtention ); // รูปต้นฉบับ
                    // Resize Image for Thumb
                    using (var stream = httpPostedFile.OpenReadStream()) {
                        using (var img = Image.FromStream(stream)) {
                            img.ScaleByHeight(150) // ขนาด 150 x 150
                            //.AddImageWatermark(sp + fname")
                            //.AddTextWatermark("http://PORNHUB.com") // ใส่ข้อความพื้นหลัง ลิขสิทธิ์ 
                            .SaveAs(sp + httpPostedFile.FileName); // รูปย่อ
                        }
                    }
                    // Write To Database hear.
                    BOQ_WorkProcessImage m = new BOQ_WorkProcessImage
                    {
                        ProjectCode = "", // รหัสโครงการ
                        Site_Code = "", // รหัส RIG
                        DigSeq = 99, // ต้นที่
                    };
                    results.IsSuccess = false;
                    results.SuccessMessage = "Success";
                }
                catch (Exception ex) {
                    results.IsSuccess = false;
                    results.ErrorMessage = ex.Message;
                    throw;
                }
            }
            return Ok(results);
        }

        //private int Add(string? number) {
        //    string? aha = null;
        //    aha = aha?.ToString() + "Hi";
        //    return 1;
        //}
    }


แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2021-01-23 11:24:33 By : ผ่านมา
 


 

No. 4



โพสกระทู้ ( 4,083 )
บทความ ( 7 )

Hall of Fame 2012

สถานะออฟไลน์


ตอบความคิดเห็นที่ : 3 เขียนโดย : ผ่านมา เมื่อวันที่ 2021-01-23 11:24:33
รายละเอียดของการตอบ ::
ขอบคุณสำหรับข้อมูลครับ เดี๋ยวผมลองศึกษาเพิ่มเติมดูครับ มือใหม่ Fontend JS มากๆครับ

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2021-01-24 08:37:22 By : Genesis™
 


 

No. 5



โพสกระทู้ ( 4,083 )
บทความ ( 7 )

Hall of Fame 2012

สถานะออฟไลน์


ตอนนี้แก้ไขได้เรียบร้อยครับ ขอบคุณทุกท่านครับ
Vuejs
<vue-dropzone
     :options="dropzoneOptions"
     :useCustomSlot="true"
     v-on:vdropzone-success-multiple="dropzoneSuccess" // แก้ไขให้เป็น multiple
     ref="myVueDropzone"
     id="dropzone"
     class="dropzone"
>
</vue-dropzone>

<script>
dropzoneOptions: {
     maxFilesize: 2,
     acceptedFiles: '.jpg,.jpeg',
     previewsContainer: false,
     uploadMultiple: true, // multiple file
     parallelUploads: 100, // limit request 
     url: '/api/admin/facilities/uploadimages',
     headers: {
          'Authorization': 'Bearer ' + localStorage.getItem('adminToken'),
     },
},
</script>


Laravel Controller
public function uploadImages(Request $request)
{
     $files = $request->file('file');
     $url = array();

     foreach ($files as $key => $file) {
          $type = $file->getClientOriginalExtension();

          if ($type === 'jpg' || $type === 'jpeg') {
               $rename = $key.'-'.date('YmdHis').'.jpg';
               $description = 'facilities/'.$rename;

               $image = Image::make($file)->fit(600, 360);
               Storage::disk('public')->put($description,$image->stream('jpg',100));

               array_push($url,Storage::url($description));
          }
     }

     return response()->json(['url' => $url]);
}



ประวัติการแก้ไข
2021-01-24 10:36:07
2021-01-24 10:36:34
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2021-01-24 10:35:20 By : Genesis™
 

   

ค้นหาข้อมูล


   
 

แสดงความคิดเห็น
Re : สอบถามเรื่อง Multiple array upload image drop zone ครับ
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ FTP| ใส่แถวของตาราง ใส่คอลัมน์ตาราง| ตัวยก ตัวห้อย ตัวพิมพ์ดีด| ใส่โค้ด ใส่การอ้างถึงคำพูด| ใส่ลีสต์
smiley for :lol: smiley for :ken: smiley for :D smiley for :) smiley for ;) smiley for :eek: smiley for :geek: smiley for :roll: smiley for :erm: smiley for :cool: smiley for :blank: smiley for :idea: smiley for :ehh: smiley for :aargh: smiley for :evil:
Insert PHP Code
Insert ASP Code
Insert VB.NET Code Insert C#.NET Code Insert JavaScript Code Insert C#.NET Code
Insert Java Code
Insert Android Code
Insert Objective-C Code
Insert XML Code
Insert SQL Code
Insert Code
เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

   
  เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง
 
โดย
อีเมล์
บวกค่าให้ถูก
<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)







Exchange: Voake, Comcube, รับทำเว็บไซต์ รับเขียนโปรแกรม , pangpond.com , pangpond.co.th , สำนักงานบัญชี.com , รถมือสอง

Load balance : Server 05
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2021 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่