NOVINKA! E-learningové kurzy umělé inteligence. Nyní AI za nejlepší ceny. Zjisti více:
NOVINKA – Víkendový online kurz Software tester, který tě posune dál. Zjisti, jak na to!

Diskuze: Chyba při ukládání a opětovném vložení obrázku

V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity
Avatar
Pavel Bambuch
Člen
Avatar
Pavel Bambuch:29.6.2016 15:17

Jak mám ošetřit kód pro ukládání obrázku pomocí AJAXu, změna obrázku a uložení funguje na bázi onchange, takže pokud vložím ten samý obrázek, tak se mi nic nenačte(tohle se mi podařilo jakžtak ošetřit), ale pokud to vymažu ještě ráz, tak mám holt smolíka a mám pouze prázdné pole.

Kód:
// pomocnik pro upload obrazku do aplikace
// inspirace ConsotosoMoving
// vyuzivat HTML 5 FileReader API pokud lze, jinak pres server callback (api/utils)
define(function (require) {
var $ = require('jquery');
var S = require('string');
var utils = require('app/u­tils/utilities');
var _ = require('under­score');
var ajax = require('app/u­tils/ajax');

var constructor = function (element, contentItem) {

function createUI($remo­veButton) {

function handleFileSelec­tHtml5(evt) {
var files = evt.target.files;
if (files.length == 1) {
var reader = new FileReader();
reader.onload = function (e) {
setContentItem(e­.target.resul­t, contentItem);
var $el = $('#uploadCap­tureInputFile');
$el.wrap('<for­m>').closest('for­m').get(1).re­set();
$el.unwrap();
$("#addDriver")[1]­.reset();

@if $wrap == break-word {
word-break: break-all;
} @else {
word-break: $wrap;
}
}
};
reader.readAs­DataURL(files[0]);
} else {
setContentItem(nu­ll, contentItem);
if reset
}
}

function handleFileSelec­tLegacy(evt) {
msls.showProgres­s(null);
function resetFormElement(e) {
e.wrap('<form>')­.closest('for­m').get(0).re­turn();
e.unwrap();

// Prevent form submission
e.stopPropaga­tion();
e.preventDefault();
}

ajax({
url: '/api/utils/I­mageDecodeBase64',
files: [evt.target],
iframe: true,
method: 'post',
success: function (data) {
if (data && data.message) {
var msg = WinJS.Resources­.getString("/cli­ent/common_Ima­geUploadServer­Callback_Error­Message").value + data.message;
msls.showMessa­geBox(msg, {
title: WinJS.Resources­.getString("/cli­ent/messageBox_Ti­tle_Error").va­lue,
buttons: msls.MessageBox­Buttons.ok
});
} else {
setContentItem(da­ta.data, contentItem)
}
},
error: function(error) {
msls.showMessa­geBox(error, {
title: WinJS.Resources­.getString("/cli­ent/messageBox_Ti­tle_Error").va­lue,
buttons: msls.MessageBox­Buttons.ok
});
},
complete: function () {
msls.hideProgres­s();

var $newFileBrowse­Button = $fileBrowseBut­ton.clone();
$fileBrowseBut­ton.replaceWit­h($newFileBrow­seButton);
$newFileBrowse­Button.on('chan­ge', handleFileSelec­tLegacy);
$fileBrowseButton = $newFileBrowse­Button;
}
});

}

var $fileBrowseBut­tonContainer = $('<div style="displa­y:none">');
//header accept support in IE10+
var $fileBrowseButton = $('<input name="file" type="file" accept="image/*" />');
var $fileButton = $('<button type="submit" class="btn btn-success"><span class="glyphicon glyphicon-upload" aria-hidden="true"></span></­button>');
$fileBrowseBut­tonContainer.ap­pend($fileBrow­seButton);
$element.appen­d($fileBrowse­ButtonContainer);
$element.appen­d($fileButton);
$element.appen­d($removeButton);

if (window.FileReader) {
$fileBrowseBut­ton.on('change', handleFileSelec­tHtml5);
} else {
$fileBrowseBut­ton.on('change', handleFileSelec­tLegacy);
}

$fileButton.on('clic­k', function () {
$fileBrowseBut­ton.trigger('clic­k');

});
}

function setContentItem(fu­llBinaryStrin­g, contentItem) {
if (null == fullBinaryString || 0 == fullBinaryStrin­g.length) {
contentItem.value = null;
} else {
contentItem.value = fullBinaryStrin­g.substring(fu­llBinaryStrin­g.indexOf(',') + 1);
}
}

function createRemoveBut­ton() {
var $removeButton = $('<button type="button" class="btn btn-danger" style="margin-left: 5px"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></­button>');
$removeButton­.on('click', function () {
contentItem.value = null;
});
return $removeButton;
}

var $element = $(element);

var $removeButton = createRemoveBut­ton();

contentItem.da­taBind('value', function (value) {
if (_.isNull(con­tentItem.valu­e) || _.isUndefined(con­tentItem.valu­e)) {
$removeButton­.attr('disabled', 'disabled');
} else {
$removeButton­.removeAttr('di­sabled');
}
});

createUI($remo­veButton);
}

return constructor;
});

 
Odpovědět
29.6.2016 15:17
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 1 zpráv z 1.