Yükseltildi [GÜNCELLEME]! (yalnızca kod ile karşılaşırsanız ancak anlaşılması kolay)
Kod, bir dosyayı bir alana sürüklemeyi ve onu (hangi dosya olursa olsun) küçük sunucu sunucusuna göndermeyi mümkün kılar. ne istiyorsun (sadece ihtiyacım olan şey).
public final class MyPage extends Page {
/**
* Constructor
*/
public HomePage() {
}
@Override
public void onInitialize() {
super.onInitialize();
add(new DropZone("dropZone", 300, 200));
}
}
sayfam.html
<!DOCTYPE html>
<html lang="en">
<body>
<wicket:extend>
// The following line adds a DropZone
<div wicket:id="dropZone"></div>
</wicket:extend>
</body>
</html>
DropZone.java
public class DropZone extends Panel {
private static final ResourceReference JS_DROP = new JavaScriptResourceReference(DropZone.class, "drop.js");
private static final ResourceReference CSS_DROP = new CssResourceReference(DropZone.class, "drop.css");
private static final ResourceReference JQUERY = new JavaScriptResourceReference(DropZone.class, "jQuery.js");
private static final ResourceReference JQUERY_UI = new JavaScriptResourceReference(DropZone.class, "jQuery-ui.js");
private static final String ID_DROPZONE = "drop-container";
/**
* Constructor
*
* @param id String The component id
* @param height int The height of the DropZone component [in pixels]
* @param width int The width of the DropZone component [in pixels]
*/
public DropZone(String id, int width, int height) {
super(id);
final WebMarkupContainer dropZone = new WebMarkupContainer(ID_DROPZONE);
final DropAjaxBehavior dropAjaxBehavior = new DropAjaxBehavior();
dropZone.add(dropAjaxBehavior);
dropZone.add(new AttributeModifier("style", new Model<String>("width:" + width + "px;height:" + height + "px;")));
add(dropZone);
}
@Override
public final void renderHead(IHeaderResponse response) {
super.renderHead(response);
// Important to add jQuery before own javascript
response.render(JavaScriptHeaderItem.forReference(JQUERY));
response.render(JavaScriptHeaderItem.forReference(JQUERY_UI));
response.render(JavaScriptHeaderItem.forReference(JS_DROP));
response.render(CssContentHeaderItem.forReference(CSS_DROP));
}
}
DropZone.html
<html>
<body>
<wicket:panel>
<div wicket:id="drop-container" id="dropContainer">
<div id="dropAppearance">
<p>
<wicket:message key="drop-message">[DROPZONE MESSAGE]</wicket:message>
</p>
</div>
</div>
</wicket:panel>
</body>
DropZone.properties
Kodunuzdaki dayanarakdrop-message = Drop Files Here
DropAjaxBehavior.java
public class DropAjaxBehavior extends AbstractAjaxBehavior {
private static final Logger LOG = LoggerFactory.getLogger(DropAjaxBehavior.class);
@Override
public final void onRequest() {
LOG.debug("Received request");
final RequestCycle requestCycle = RequestCycle.get();
processRequest(requestCycle);
sendResponse(requestCycle);
}
private void processRequest(RequestCycle requestCycle) {
final WebRequest wr = (WebRequest)requestCycle.getRequest();
final HttpServletRequest hsr = (HttpServletRequest)wr.getContainerRequest();
try {
final byte[] data = new byte[hsr.getContentLength()];
ByteStreams.readFully(hsr.getInputStream(), data);
// filename:<NAME>;data:<TYPE>;base64,<FILEDATA>
final String[] base64Data = new String(data).split(";");
final String fileName = base64Data[0].substring(base64Data[0].indexOf(':') + 1, base64Data[0].length());
final String dataType = base64Data[1].substring(base64Data[1].indexOf(':') + 1, base64Data[1].length());
final String binaryData = base64Data[2].substring(base64Data[2].indexOf(',') + 1, base64Data[2].length());
// [in my case] do something if the fileType is an image
if (dataType.contains("image")) {
final byte[] image = DatatypeConverter.parseBase64Binary(binaryData);
DatabaseQuery.addImage(image, fileName);
}
// But you can make a local file
// final File file = new File(fileName);
// final ByteArrayInputStream binaryInputstream = new ByteArrayInputStream(image);
// final FileOutputStream outputStream = new FileOutputStream(file);
// ByteStreams.copy(binaryInputstream, outputStream);
// outputStream.close();
} catch (IOException ioe) {
LOG.error("IO error while reading HttpServletRequest: ", ioe);
}
}
private void sendResponse(RequestCycle requestCycle) {
// Just some response
requestCycle.scheduleRequestHandlerAfterCurrent(new TextRequestHandler("text/html", "UTF-8", "done"));
}
@Override
protected final void onComponentTag(ComponentTag tag) {
tag.put("my:dropcontainer.callback", getCallbackUrl().toString());
}
}
drop.css
#dropContainer {
background-color: #FFFFFF;
border: 4px dashed #C9C9C9;
-moz-box-sizing: border-box;
box-sizing: border-box;
position: absolute;
}
#dropAppearance {
height: 100%;
width: 100%;
display: table;
box-sizing: border-box;
}
#dropAppearance p {
display: table-cell;
vertical-align: middle;
text-align: center;
font-size: 2em;
color: #797979;
}
drop.js
$(document).ready(
function() {
// Makes sure the dataTransfer information is sent when we
// Drop the item in the drop box.
jQuery.event.props.push('dataTransfer');
// As far as i know Firefox needs to cancel this event (otherwise it
// opens
// dropped files in the browser)
$('#dropContainer').attr('ondragover', "return false");
$('#dropContainer').bind(
'drop',
function(e) {
// Files that have been dragged into the drop area
var files = e.dataTransfer.files;
// Upload each file
$.each(files, function(i, file) {
var reader = new FileReader();
reader.onload = function(input) {
var fileName = "fileName:" + file.name + ";";
var base64data = input.target.result;
$.ajax({
url : $('#dropContainer').attr(
'my:dropcontainer.callback'),
type : 'post',
cache : false,
// Add date before raw base64 file data
data : fileName + base64data,
processData : false,
contentType : false,
});
};
// decode into base64
reader.readAsDataURL(file);
});
return false;
});
// Using little dragging hack because of the HTML5 spec problem
// URL:
// http://www.quirksmode.org/blog/archives/2009/09/the_html5_drag.html
// works like:
// <parent element>
// dragging = 0
// <drop_container>
// dragging = 1
// <child>
// dragging = 2
// </child>
// dragging = 1
// </drop_container>
// dragging = 0
// </parent element>
var dragging = 0;
$('#dropContainer').bind('dragenter', function() {
dragging++;
setHoverDropContainer();
return false;
});
$('#dropContainer').bind('dragleave', function() {
dragging--;
if (dragging === 0) {
resetHoverDropContainer();
}
return false;
});
$('#dropContainer').bind('drop', function() {
dragging = 0; // reset dragging hack
resetHoverDropContainer();
return false;
});
});
function setHoverDropContainer() {
// change colors with smooth transition
setCSS('#dropContainer', {
'border-color' : '#0000FF',
'background-color' : '#EDF4FE',
'-webkit-transition' : 'background-color 0.6s ease',
'-moz-transition' : 'background-color 0.6s ease',
'-o-transition' : 'background-color 0.6s ease',
'transition' : 'background-color 0.6s ease',
'-webkit-transition' : 'border-color 0.6s ease',
'-moz-transition' : 'border-color 0.6s ease',
'-o-transition' : 'border-color 0.6s ease',
'transition' : 'border-color 0.6s ease'
});
}
function resetHoverDropContainer() {
// change colors with smooth transition
setCSS('#dropContainer', {
'border-color' : '#C9C9C9',
'background-color' : '#FFFFFF',
'-webkit-transition' : 'background-color 0.6s ease',
'-moz-transition' : 'background-color 0.6s ease',
'-o-transition' : 'background-color 0.6s ease',
'transition' : 'background-color 0.6s ease',
'-webkit-transition' : 'border-color 0.6s ease',
'-moz-transition' : 'border-color 0.6s ease',
'-o-transition' : 'border-color 0.6s ease',
'transition' : 'border-color 0.6s ease'
});
}
function setCSS(element, values) {
$(element).css(values);
}
}
Ben Drag elde bir resmin ekleyerek görmek ve html5 demo [dnd-upload]
isn't kötü javascript? – SomeJavaGuy
@KevinEsche Hayır, ama ajax davranışı yapmak için Javascript kullanır. – Marcel
Bugün Wicket 6 ile çalışan wicket-dnd'in yeni bir enstantane versiyonu açıklandı. Lütfen https://github.com/svenmeier/wicket-dnd adresini ziyaret edin –