需要有关Ajax fileupload的建议

时间:2011-03-18 07:49:42

标签: php html jquery file-upload

我正在尝试使用Ajax文件上传器 http://valums.com/ajax-upload/

医生说:

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){},

我希望上传完成时在某处显示文件列表,例如在ID = list

的div中

该短片将受到高度赞赏并获奖。

3 个答案:

答案 0 :(得分:2)

我已经使用了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。您可以找到我的操作herehere 您的服务器端代码将设法将文件保留在您想要的位置,并将信息返回到客户端脚本 我个人将我使用事件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:truesuccess:false,因此我可以向用户显示警告:

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

答案 1 :(得分:1)

  

我如何处理上传的文件以及位于何处?

这取决于您的网络服务器和后端语言。在PHP中查看$_FILES数组。

  

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

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

答案 2 :(得分:1)

  

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

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

  

我如何处理上传的文件

使用服务器端语言编写服务器端脚本。

  

在哪里?

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