是否有Grails的真正的异步/ AJAX文件上传挂钩到默认的“忙”微调(在显示上其他的Ajax调用一个)?
或者,如果我想要一个文件上传我需要在通话过程中显示,微调是明确?
是否有Grails的真正的异步/ AJAX文件上传挂钩到默认的“忙”微调(在显示上其他的Ajax调用一个)?
或者,如果我想要一个文件上传我需要在通话过程中显示,微调是明确?
这是你平时需要一些帮助从第三方,因为一些复杂性和限制的交换背后的那些东西之一。
一些插件都可以使用Flash来实现这个jQuery但我更愿意避免任何使用Flash(个人喜好)。 退房Valums Ajax的上传现在我已经用它了大约一年在我的生产现场和它运作良好,并很容易使用。 我对插件最喜欢的事情是,它不唐突几乎所有网站的设计和布局。
此外,这是一个常见的问题。 看看这些答案,以及...
杰夫,
我会像这样的代码...
你必须调用微调,如果在所有你想要的代码,以显示自己。 如果你要显示的图像。
您可以使用XMLHttpRequest,这里是包括我拖放完成一个项目的完整代码:
<div id="drop_zone">Drag and drop your file here or click</div>
<input id="curriculumUploader" type="file" name="curriculum" style="display:none;"/>
function uploadCurriculum(file) {
var xmlhttp;
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//FormData will contain the post params
var form = new FormData();
xmlhttp.onreadystatechange = function() {
//Handle response if everything is right
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
//This is the element where i will put my response
var element = document.getElementById('curriculum');
//The response is given in the property responseText
element.innerHTML = xmlhttp.responseText;
//If you response has javascript elements, you need to place them in the header to make client compile them
var scriptElements = element.getElementsByTagName('SCRIPT');
for (i = 0; i < scriptElements.length; i ++) {
var scriptElement = document.createElement('SCRIPT');
scriptElement.type = 'text/javascript';
if (!scriptElements[i].src) {
scriptElement.innerHTML = scriptElements[i].innerHTML;
} else {
scriptElement.src = scriptElements[i].src;
}
document.head.appendChild(scriptElement);
}
}
}
//Put your params in the url if you want to send them by GET
xmlhttp.open("POST", window.appContext + "/controller/action/" + someParams, true);
xmlhttp.setRequestHeader("X-Requested-With", "XMLHttpRequest");
//add the file to the form to send by POST
form.append('curriculum', file);
xmlhttp.send(form);
}
function handleFileSelect(event) {
handleDragOver(event);
var files = event.target.files || event.dataTransfer.files;
if (files.length > 0) {
parseFile(files[0]);
}
}
function handleDragOver(event) {
event.stopPropagation();
event.preventDefault();
if (event.type == "dragover") {
event.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
addClass(event.target, "hover");
} else {
removeClass(event.target, "hover");
}
}
function showFileSelect() {
document.getElementById('curriculumUploader').click();
}
function parseFile(file) {
if (file != null && file.size > 0) {
uploadCurriculum(file)
} else {
console.log('Invalid file');
}
}
// Setup the dnd listeners.
var dropZone = document.getElementById('drop_zone');
if (dropZone != null) {
dropZone.addEventListener('dragover', handleDragOver, false);
dropZone.addEventListener("dragleave", handleDragOver, false);
dropZone.addEventListener('drop', handleFileSelect, false);
dropZone.addEventListener('click', showFileSelect, false);
}
var inputelement = document.getElementById('curriculumUploader');
inputelement.addEventListener('change', handleFileSelect, false);
#drop_zone {
padding: 15px;
text-align: center;
border: 1px dashed #4b9df2;
color: #4b9df2;
cursor: pointer;
transition: all linear 0.2s;
}
#drop_zone.hover {
border: 1px dashed #C99F23;
color: #C99F23;
}