Question

我有一个带有几个输入字段和两个文件输入（图像上传）的表单。基本要求工作正常，直到我尝试为其中一个文件输入字段集成图像拖动/上传和裁剪功能。

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

我已成功拖放图像并将其裁剪。使用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);

所以我需要为此文件上传元素提供图像值，以便像以前一样使用表单提交功能。

感谢您的帮助。

将裁剪的图像添加到现有的表单文件输入并提交表单

0 个答案: