简单的jQuery文件上传插件(仅使用iframe) [英] Simple jQuery file upload plugin (using only iframes)
问题描述
我花了很多时间在网络上查找一个非常简单且基本的jQuery插件,使我可以在不刷新页面的情况下上传文件,我不希望这些大型插件具有所有出色的技术,我希望它能够轻松添加到我的网站.因此,我刚刚制作了自己的小jQuery插件,并决定与所有人共享它,以防其他任何人正在寻找它.现在,我不是创建jQuery插件的专家,因此,如果我可以进行任何改进,请告诉我.
I had spent many hours searching the web to find a very simple and basic jQuery plugin to allow me to upload files without refreshing the page, I didn't want these big plugins with all their fancy techniques, and I wanted it to be easily added to my website. So I have just made my own little jQuery plugin to do so, and I have decided to share it with all of you in case anyone else is looking for one. Now I am not an expert with creating jQuery plugins, so if there are any improvements I could make, do let me know.
所以这里是:
这是您可以设置使用的html表单:
<form enctype="multipart/form-data" class="fileUpload">
<input type="file" name="uploadFile" />
</form>
插件的调用方式如下:
$("body").on("change", ".fileUpload", function(){
$(this).fileUpload({
form: $(this), //selector of the form
actionURL: "uploadPhoto.php", //directory to handle upload
success: function(html){
//on successful upload, in this case if there is any html returned
$("body").prepend(html);
},
error: function(){
}
});
});
这是插件本身:
(function($){
$.fn.extend({
fileUpload: function(options) {
var defaults = {
form: null,
actionURL: null,
success: function(){},
error: function(){},
};
var options = $.extend(defaults, options);
return this.each(function() {
$('<iframe />', {
id: 'upload_iframe',
name: 'upload_iframe',
style: 'width:0; height:0; border:none;'
}).appendTo('body');
var form = $(options.form);
form.attr("action", options.actionURL);
form.attr("method", "post");
form.attr("enctype", "multipart/form-data");
form.attr("encoding", "multipart/form-data");
form.attr("target", "upload_iframe");
form.submit();
$("#upload_iframe").load(function () {
html = $("#upload_iframe")[0].contentWindow.document.body.innerHTML;
html!='' ? options.success.call(this, html) : options.error.call(this);
$("iframe#upload_iframe").remove();
});
});
}
});
})(jQuery);
uploadPhoto.php:
foreach($_FILES as $file)
{
foreach ($file['uploadFile'] as $name)
{
$fileArr = explode("." , $name);
$ext = strtolower($fileArr[count($fileArr)-1]);
$allowed = array("jpg", "jpeg", "png", "gif", "bmp");
if(in_array($ext, $allowed))
{
$source = $file['tmp_name'][$i++];
$path = "images/";
$filename = uniqid();
if (move_uploaded_file($source, $path.$filename.$ext))
{
//Do whatever on success of file upload
}
}
}
}
推荐答案
您可以使用精细的上传器.我在生产应用程序中使用它,并且效果很好.我们甚至已经将它直接上传到S3.
You can use fine uploader. I use it in a production application and it works very well. We've even got it uploading directly to S3.
这篇关于简单的jQuery文件上传插件(仅使用iframe)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!