jquery - uploading image via ajax from cropit plugin -


i using jquery cropit plugin have user upload , crop image. once image cropped liking click "upload" button , supposed save server in specified folder. able save cropped image in javascript variable using cropit's export function. have output window , verified working. when make ajax call send controller save server, can't figure out how image. request.files empty , imagefile null. using mvc , asp.net.

html:

<div id="image-cropper">     <div class="cropit-image-preview-container">         <div class="cropit-image-preview"></div>     </div>     <div class="slider-wrapper">         <span class="icon icon-image small-image"></span>         <input class="cropit-image-zoom-input custom" type="range" min="0" max="1" step="0.01">         <span class="icon icon-image large-image"></span>         </div>         <div class="btns">             <!-- actual file input hidden -->             <!-- , clicking on button open select file dialog -->             <input class="cropit-image-input custom" type="file" accept="image/*">             <input type="hidden" class="hidden-image-data" />             <div class="btn select-image-btn">                 <span class="icon icon-image"></span>                 select new image             </div>             <div class="btn upload-btn">                 <span class="icon icon-box-save"></span>                 upload cropped image             </div>         </div>     </div>

javascript:

$('#image-cropper').cropit({             imagebackground: true,             onimageloading: function () {                 // these lines needed center background image match main cropped image                 $(".cropit-image-preview-container").css("width", "500px");                 $(".cropit-image-background-container").css("left", "51px");             }         });          // when user clicks select image button,         // open select file dialog programmatically         $('.select-image-btn').click(function () {             $('.cropit-image-input').click();         });         $('.upload-btn').click(function () {             var imagedata = $('#image-cropper').cropit('export', {                 type: 'image/jpeg'             });             $('.hidden-image-data').val(imagedata);             var formdata = new formdata();             formdata.append("imagefile", imagedata);             var token = $('input[name="__requestverificationtoken"]').val();             var headers = {};             headers['__requestverificationtoken'] = token;             $.ajax({                 url: '@url.action("uploadimage", "admin")',                 //headers: headers,                 data: formdata,                 type: "post",                 contenttype: false,                 processdata: false,                 success: function (response) {                     console.log(response);                 },             });         });

controller action:

[httppost] //[validateantiforgerytoken] public bool uploadimage(httppostedfilebase imagefile) {     bool saved = false;     foreach(string file in request.files)     {         var filecontent = request.files[file];     }     if (imagefile != null)     {         // validate uploaded image(optional)         // complete file path         var filesavepath = path.combine(system.web.httpcontext.current.server.mappath("~/content/img/products"), imagefile.filename);          // save uploaded file "uploadedfiles" folder         imagefile.saveas(filesavepath);         if (system.io.file.exists(filesavepath))         {             saved = true;         }     }     return saved; }

you trying save base 64 data directly file. cropit "export" function returns data in datauri format has real binary data encoded in base 64.

you code alright point trying save data file. use base 64 decoder decode first before saving.


Comments

Post a Comment

Popular posts from this blog

javascript - Bootstrap Popover: iOS Safari strange behaviour -

i looking through twitter bootstrap documentation, , i'm interested in implementing dismissible popover when button clicked. here example bootstrap's docs: http://getbootstrap.com/javascript/#dismiss-on-next-click when press "dismissible popover" button os x safari browser works fine. when access same link above ios safari, button not work. is, popover not dismissed on click. why button not working ios safari? the example linked using data-trigger="focus" attribute. try changing data-trigger="click" . <a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="click" title="dismissible popover" data-content="and here's amazing content. it's engaging. right?">dismissible popover</a>
Read more

Magento/PHP - Get phones on all members in a customer group -

i working on custom magento extension. working around adminhtml part , i've created custom form there. here form code: <?php class vivasindustries_smsnotification_block_adminhtml_sms_sendmass_edit_form extends mage_adminhtml_block_widget_form { public function _preparelayout() { $extensionpath = mage::getmoduledir('js', 'vivasindustries_smsnotification'); $head = $this->getlayout()->getblock('head'); $head->addjs('jquery.js'); $head->addjs('vivas.js'); return parent::_preparelayout(); } protected function _prepareform() { $form = new varien_data_form(array( 'id' => 'edit_form', 'action' => $this->geturl('*/*/save', array('id' => $this->getrequest()->get...
Read more

session - Logging Out Using PHP -

i have seen other programs regarding can't seem make work. doing wrong? want achieve after user logged out, going previous pages become restricted. i have 3 php files: 1. sample.php - main page username , password filled in 2. successful.php - user's page after logging in 3. logout.php - destorys session hinder user access pages after logging out sample.php </html> <form action="" method="post"> <table> <tr> <td>username:</td> <td>password:</td> </tr> <tr> <td><input type="text" name="username"></td> <td><input type="password" name="password"></td> </tr> <tr> <td><input type="submit" value="submit" name="submit"></td> </tr> </table> </form> </html> <?php $servername = "localhost"; $username = ...
Read more