关于Ajax需要咨询的FileUpload

我试图获取使用了Ajax文件上传的 http://valums.com/ajax-upload/关于Ajax需要咨询的FileUpload

的医生说：

var uploader = new qq.FileUploader({ 
    // pass the dom node (ex. $(selector)[0] for jQuery users) 
    element: document.getElementById('file-uploader'), 
    // path to server-side upload script 
    action: '/server/upload' 
    // WHAT IS action:? 
});

的元素属性意味着什么元素ID用作上传按钮。什么是动作？它必须是某种上传文件的处理程序？

我如何处理上传的文件和位置？

的医生说

// events   
// you can return false to abort submit 
onSubmit: function(id, fileName){}, 
onProgress: function(id, fileName, loaded, total){}, 
onComplete: function(id, fileName, responseJSON){}, 
onCancel: function(id, fileName){},

我想在上传完成显示某处的文件列表中，用DIV ID =列表

说一小段将得到高度赞赏和奖励。

来源

2011-03-18 Captain Comic

我已经使用File Uploader相当多，我认为它是最好的文件上传。

该操作是从您的Ajax客户端脚本接收调用的方法（URL）。您的HTML定义一个DIV：

<div id="uploaderFile"></div>

我用一个JavaScript函数来围绕打造DIV我上传：

function CreateImageUploader() { 
    var uploader = new qq.FileUploader({ 
     element: $('#uploaderFile')[0], 
     template: '<div class="qq-uploader">' + 
           '<div class="qq-upload-drop-area"><span>Drop files here to upload</span></div>' + 
           '<div class="qq-upload-button ui-button ui-widget ui-corner-all ui-button-text-only ui-state-default">Seleziona il Listino Excel</div>' + 
           '<ul class="qq-upload-list"></ul>' + 
           '</div>', 
     hoverClass: 'ui-state-hover', 
     focusClass: 'ui-state-focus', 
     action: 'Home/UploadImage', 
     allowedExtensions: ['jpg', 'gif'], 
     params: { }, 
     onSubmit: function(file, ext) { 

      }, 
     onComplete: function(id, fileName, responseJSON) { 
      $("#PopupImageUploader").dialog('close'); 
      } 
     } 
    }); 
}

这里发生的是您要创建上传围绕此元素元素：$('#uploaderFile')[0]。我已经使用了标准模板，但您可以更改外观。当你做完这些事情之后，客户端的一切都已经完成。在服务器端（取决于您使用的是什么），您必须拦截并读取文件并将其保留。
我使用ASP.NET MVC。您可以找到我的动作here和here 您的服务器端代码将设法将文件保留在所需位置，并将信息返回给客户端脚本。
就我个人而言，我将事件onComplete管理的json数据返回到：关闭对话框（如示例中所示）;显示一条消息等等等等等

如果你想传参数给服务器端的客户端，你可以返回一个JSON对象。我会做这样的事情：

return ("{success:true, newfilename: '" + newFileName + "'}");

我认为，在PHP可能是这样的：

echo {success:true, newfilename: '" + newFileName + "'}";

原谅我，如果存在这样的错误，但我从来没有写一个PHP线在我的整个生活;-)

客户端现在可以检查JSON对象是这样的：

onComplete: function(id, fileName, responseJSON) { 
    alert(responseJSON.newfilename); 
}

正如你可以看到我传回行动的结果：success:true或success:false这样我就可以显示警告用户：

onComplete: function(id, fileName, responseJSON) { 
if (responseJSON.success) 
{ 
    alert(responseJSON.newfilename); 
} 
else { 
    alert("something wrong happened"); 
} 
}

来源

2011-03-18 08:07:20 LeftyX

谢谢，我的serverside是PHP。 – 2011-03-18 08:12:32

我想我的问题是，我几乎没有关于AJAX如何工作的知识。我仍然不知道它是如何工作的 - 所以URL处理程序不会在浏览器中加载，而只是被调用？ – 2011-03-18 08:15:51

如果你使用PHP，你可以在这里使用他们的例子：https://github.com/valums/ajax-upload/blob/master/server-side/upload-handler.php是的，URL是服务器端代码你用它来保存你从磁盘中选择的文件。 – LeftyX 2011-03-18 08:22:08

我如何处理上传的文件和位置？

这取决于您的网络服务器和后端语言。在PHP看看$_FILES阵列。

什么是行动？它必须是某种上传文件的处理程序？

用于上传文件的表单提交到的URL。

来源

2011-03-18 07:54:53 ThiefMaster

让我把它放在其他办法，我怎么可以设置PHP处理程序页面。当我使用

什么是行动？它必须是某种上传文件的处理程序？

是的，与HTML <form>元素的attribute相同。

我如何处理上传的文件

随着优先写入你的服务器端语言服务器端脚本。

并且在哪里？

可能是作为STDIN的流。用上述服务器端语言使用的表单库有自动提取它的方法。

来源

2011-03-18 07:54:54 Quentin

谢谢大卫。但我没有得到以下。使用旧学校上传将使我的浏览器只是加载其他（或相同）的PHP页面，指定为处理程序。它如何工作的Ajax上传？抱歉跛脚的问题，我不断学习。 – 2011-03-18 08:05:28

我没有，也不打算通过您使用的第三方代码。它可能会向隐藏的iframe发布表单。 – Quentin 2011-03-18 08:07:00

关于Ajax需要咨询的FileUpload

回答

相关问题