我有一个带有几个输入字段和两个文件 inputs(image upload 的表单。基本要求工作正常,直到我尝试为其中一个文件输入字段集成图像 drag/upload 和裁剪功能。

UI 流程就像是,对于其中一个图片上传,我必须打开一个弹出窗口,在那里拖放图像,裁剪它并使用该图像进行上传。

我已成功 dragged/dropped 图像并裁剪它。使用 jquery cropper 库进行裁剪后,我有一个 base64 版本的图像和一个 blob 版本。我需要的是将这个图像与现有表格一起容纳在相应图像的位置,并且表单提交代码不会因为这种集成而失败。

等待帮助。

我将展示一个示例表单以使场景清晰。

//working form

<form method="post" enctype...>
    <input>
    <input>
    <!--<input type="file" name="image1">--> //image image should be uploaded and cropped from a modal, so I have changed this to as below
    <button>Upload Image</button> // when click on this a popup will appear and there I crop the uplaoded image separetly
    <input type="file" name="image2">
    <button>Save</button>
</form>

//Popup
javascript

 var canvas = $imageCropper.cropper('getCroppedCanvas', canvasOptions);                                
 // get cropped image data
 var ImageURL = canvas.toDataURL('image/jpeg', quality);
 // transform it to Blob object
 var compressedFile = dataURItoBlob(dataUrl);

因此,我需要为此文件上传元素提供图像值,以便像以前一样处理表单提交功能。

感谢您的帮助。