需要关于Ajax文件上传的建议 [英] Need advice on Ajax fileupload

问题描述

我试图使用Ajax文件上传
http://valums.com/ajax-上载/

文件显示：

  var uploader = new qq.FileUploader（{
 //传递dom节点（例如jQuery用户的$（selector）[0]）
元素：document.getElementById（'file-uploader'），
 //服务器端上传脚本的路径
操作：'/ server / upload'
 //什么是操作：？
}）; 
  

元素表示元素ID用作上传按钮。
什么是动作？它必须是上传文件的某种处理程序？

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

$ doc

  // events 
 //你可以返回false来中止提交
 onSubmit ：function（id，fileName）{}，
 onProgress：function（id，fileName，loaded，total）{}，
 onComplete：function（id，fileName，responseJSON）{}，
 onCancel：function（id，fileName）{}，
  

我想在上传完成后显示一个文件列表在某些地方，比如在ID = list的div里面。

这个简短的代码片段将被高度赞赏和授予。

解决方案

我已经使用File Uploader了很多，我认为这是最好的文件上传。

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

 < div id =uploaderFile>< / DIV> 
  

我已经使用了一个javascript函数来构建我的上传器：

$ b $

 函数CreateImageUploader（）{
 var uploader = new qq.FileUploader（{
 element：$（'＃uploaderFile'）[ 0]，
 template：'< div class =qq-uploader>'+ 
'< div class =qq-upload-drop-area>< span>这里要上传的文件< / span>< / div>'+ 
< div class =qq-上传 - 按钮ui-按钮ui-小部件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']，
函数（file，ext）{
 $ b}，
 onComplete：函数（id，fileName，responseJSON）{
 $（ #PopupImageUploader）对话框（ '亲密'）。 
} 
} 
}）; 
 
 
 
 $ b $ p 
 $ b 
这里发生的是你正在创建这个元素元素的上传器： code> $（ '＃uploaderFile'）[0] 。我使用了标准模板，但是您可以更改外观。 
当你完成这一切后，在客户端的一切都已经完成。 
在服务器端（这取决于你正在使用的），你必须拦截并读取文件并坚持它。
 
我使用ASP.NET MVC。你可以找到我的行动这里和这里 
您的服务器端代码将设法将文件保留在您想要的位置，并将信息返回给客户端脚本。
 
就我个人而言，我将使用事件 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（发生了什么错误）; 
} 
} 
  
 
I am trying get use of Ajax file uploader
http://valums.com/ajax-upload/


The doc says:
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:?
});
The element property means what element ID is used as Upload button. 
What is action? It must be some sort of handler for uploaded files?

How I can handle uploaded files and where are located?

The doc says 
// 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){},
I want when upload complete display a list of files somewhere, say in div with ID=list

The short snippet will be highly appreciated and awarded.
解决方案
I've used File Uploader quite a lot and I think it is the best file uploader out there.  

The action is the method (URL) which receives the call from your Ajax client script.
You have to define a DIV in your HTML:
<div id="uploaderFile"></div>
I've used a javascript function to build my uploader around the 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');
            }
        }
    });
}
What happens here is you're creating an uploader around this element element: $('#uploaderFile')[0]. I've used the standard template but you can change the appearance.
When you've done that everything is pretty much setup on the client-side.
On the server side (it depends what you're using) you have to intercept and read the file and persist it.

I use ASP.NET MVC. You can find my action here and here
Your server-side code will manage to persist the file where you want and will return infos to the client script.

Personally I return json data which I manage with the event onComplete to: close a dialog  (like in the example); show a message etc etc etc.  

If you want to pass parameters back to the client on the server side you can return a JSON object. I would do something like this:
return ("{success:true, newfilename: '" + newFileName + "'}");
I reckon that in PHP could be something like this:
echo {success:true, newfilename: '" + newFileName + "'}";
Forgive me if there are mistakes in that but I've never written a single PHP line in my whole life ;-)

the client side now can check the JSON object  like this:
onComplete: function(id, fileName, responseJSON) {
   alert(responseJSON.newfilename);
}
As you can see I pass back the result of the action: success:true or success:false so I can show a warning to the user:
onComplete: function(id, fileName, responseJSON) {
if (responseJSON.success)
{
    alert(responseJSON.newfilename);
}
else {
    alert("something wrong happened");
}
}


                        
这篇关于需要关于Ajax文件上传的建议的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！