javascript - วิธีอัปโหลดรูปภาพด้วย Jodit uploader และ coldfusion?
ฉันกำลังใช้ Jodit เพื่อสร้างตัวแก้ไข WYSIWYG ฉันมีไฟล์ ColdFusion (uploadimage2.cfm) ที่ว่างเปล่า เมื่อฉันส่งรูปที่อัปโหลดไปยังหน้า ColdFusion ที่ว่างนั้น ฉันได้รับข้อผิดพลาดที่บอกว่า ColdFusion ไม่สามารถหาตัวแปร "FILES" ได้
Jodit กำลังส่งข้อมูลฟอร์มดังต่อไปนี้ไปยัง uploadimage2.cfm:
------WebKitFormBoundaryIrkl9oNQedwACmBe
Content-Disposition: form-data; name="path"
------WebKitFormBoundaryIrkl9oNQedwACmBe
Content-Disposition: form-data; name="source"
default
------WebKitFormBoundaryIrkl9oNQedwACmBe
Content-Disposition: form-data; name="files[0]"; filename="HandShake.JPG"
Content-Type: image/jpeg
------WebKitFormBoundaryIrkl9oNQedwACmBe--
ดูเหมือนว่า coldfusion จะติดอยู่ที่ส่วน name="files[0]" ฉันมีฟังก์ชันอัปโหลดที่ใช้งานได้ซึ่งไม่ใช้ Jodit และมันส่ง name="image" แทนมัน
ฉันไม่สามารถดักจับข้อมูลแบบฟอร์มเพื่อพยายามเปลี่ยนชื่อเมื่อ Jodit ส่งข้อมูล
นี่คือ JavaScript ของฉันกับปลั๊กอิน Jodit:
var editor = new Jodit('#newEditor',
uploader: {
url: "uploadimage2.cfm",
filesVariableName: "image"
}
);
ฉันจะส่งข้อมูลฟอร์มที่ถูกต้องเพื่อให้ ColdFusion ไม่เกิดข้อผิดพลาดได้อย่างไร?
คำตอบ #1
ในที่สุดฉันก็ค้นพบว่าปัญหาของฉันอยู่ในไฟล์ application.cfc ฟังก์ชัน onRequest กำลังพยายามประเมินค่า "files[0]" เพื่อให้แน่ใจว่าไม่มีการแทรกสคริปต์ในนั้น ซึ่งสิ่งนี้ถูกใช้สำหรับการอัปโหลดข้อความฟอร์มอื่น ๆ
นี่คือวิธีที่ฉันทำให้การอัปโหลดของ Jodit ทำงานร่วมกับ ColdFusion ได้อย่างสมบูรณ์:
ไฟล์ uploadimage2.cfm ของฉัน:
<!--- set content type to json so jodit can read the response --->
<cfheader name="Content-Type" value="application/json">
<!--- create a structure with necessary objects --->
<cfset responseStruct = structNew()>
<cfset responseStruct["message"] = "File was uploaded">
<cfset responseStruct["error"] = 0>
<cfset responseStruct["path"] = "#application.image_root#">
<cfset responseStruct["images"] = []>
<cfset variables.mediapath="#application.image_upload_root#\">
<!--- loop over the form data to upload each image individually --->
<cfloop collection="#form#" item="i">
<cfif findNoCase("files",i) gte 1>
<cffile action="upload"
fileField="#i#"
destination="#variables.mediapath#"
accept="image/jpg, image/jpeg, image/png, image/gif, image/svg+xml"
nameconflict="makeunique"
result="this_image">
<cfscript>arrayAppend(responseStruct["images"],"#this_image.serverFile#");</cfscript>
</cfif>
</cfloop>
<!--- serialize the structure to json --->
<cfoutput>#serializeJSON(responseStruct)#</cfoutput>
แล้วในการเริ่มต้น Jodit ของฉัน:
var editor = new Jodit('#editor',
{
uploader: {
url: "uploadimage2.cfm",
isSuccess: function (resp) {
//this step is necessary for whatever reason, otherwise it will throw an error.
return resp;
},
process: function(resp){
//this was an important step to align the json with what jodit expects.
return {
files: resp.images,
path: resp.path,
baseurl: resp.path,
error: resp.error,
message: resp.message
}
}
}
}
);
