तो यहाँ जवाब के रूप में देने का वादा किया है उन्नत! (केवल कोड लेकिन अगर आप विकेट से परिचित हैं तो समझने में आसान)
कोड किसी फ़ाइल को फ़ाइल खींचना संभव बनाता है, और इसे विकेट सर्वर पर भेजता है (इससे कोई फर्क नहीं पड़ता कि यह फ़ाइल कौन सा हो) यह हमेशा नहीं होता है आप क्या चाहते हैं (लेकिन केवल मुझे जो चाहिए)।
drop.js में निम्नलिखित जावास्क्रिप्ट जांच जोड़ने अगर आप केवल फ़ाइल के 1 प्रकार चाहते अपलोड करने की:
// For each file: check if files are images
for (i = 0; i < files.length; i++) {
if (!files[i].type.match('image.*')) { // Replace with what you need
$('#dropAppearance p').html('Hey! Images only');
return false;
}
}
फ़ाइलें:
- MyPage.java
- mypage.html
- DropZone.java
- DropZone.html
- DropZone.properties
- DropAjaxBehavior
- drop.js
- drop.css
प्रयुक्त Libs:
- jQuery.js
- jQuery-ui.js
- विकेट 6.2
- slf4j-1.2.16
- log4j-1.2.16
- अमरूद-13.0.1
मैं आयात शामिल नहीं किया था, क्योंकि मैं आलसी
MyPage हूँ।जावा
public final class MyPage extends Page {
/**
* Constructor
*/
public HomePage() {
}
@Override
public void onInitialize() {
super.onInitialize();
add(new DropZone("dropZone", 300, 200));
}
}
mypage.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
drop-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);
}
}
परीक्षण के नाम और भयानक छवियों का उल्लेख न करें (यह अभी भी परीक्षण fase में है)
isn't दुष्ट जावास्क्रिप्ट? – SomeJavaGuy
@ केविन एशे नहीं, लेकिन यह AJAX व्यवहार करने के लिए जावास्क्रिप्ट का उपयोग करता है। – Marcel
विकेट-डीएनडी का एक नया स्नैपशॉट संस्करण जो विकेट 6 के साथ काम करता है आज घोषित किया गया है। कृपया https://github.com/svenmeier/wicket-dnd –