File APIを使ってドロップでファイルをアップロードできるjQueryプラグインを作ってみる
■ダウンロード
クリックしてダウンロードして下さい。
■動作ブラウザ
Firefox 3.6+, Google Chrome 6+
■使い方
1.HTMLでプラグインを読み込む
jQuery本体を読み込んだ後にプラグインのJavaScriptを読み込む。
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="jquery.dropUploader.js"></script>
2.JavaScriptでプラグインを設置する
以下のようにして、p.uploaderにファイルをドロップすると、ファイルをアップロードすることができる。
$(function(){
$('p.uploader').dropUploader({
"action" : "./save.php",
"allowedMimetypes" : [
'image/png',
'image/jpeg',
'image/gif'
],
/*
"onDragstart" : function(elm){
//alert('dragstart');
},
"onMouseover" : function(elm){
//alert('mouseover');
},
*/
"onProgress" : function(value){
//console.log(value);
},
"onPartialError" : function(){
alert('onPartialError');
},
"onComplete" : function(){
alert('finished');
}
});
});
3.サーバーサイド（./save.php）でファイルを保存する
以下のようにするとPHPでファイルを保存することができる。但し、以下のコードはチェックを行っていないので、実際に使用する際にはファイルサイズや拡張子などのチェックを必ずしなくてはならない。
file_put_contents(basename($_GET['filename']), fopen('php://input', 'r'));
プラグイン本体
ワクワクする部分★
(function($){
$.fn.dropUploader = function(options){
var self = this;
var options = options;
/**
* _onDragstart
* @param {Object} elm
*/
var _onDragstart = function(elm){
if(typeof options['onDragstart'] === 'function'){
options['onDragstart']();
}
else{
$(elm).css({
"border" : "5px dotted #cccccc"
});
}
}
/**
* _onMouseover
* @param {Object} elm
*/
var _onMouseover = function(elm){
if(typeof options['onMouseover'] === 'function'){
options['onMouseover']();
}
else{
$(elm).css({
"border" : "5px dotted #cccccc"
});
}
}
/**
* _onMouseout
* @param {Object} elm
*/
var _onMouseout = function(elm){
if(typeof options['onMouseout'] === 'function'){
options['onMouseout']();
}
else{
$(elm).css({
"border" : "none"
});
}
}
/**
* _getAction
* @param {string} action
* @param {string} filename
*/
var _getAction = function(action, filename){
var url = '';
if(action.indexOf('?') > -1){
url = action + '&filename=' + encodeURIComponent(filename);
}
else{
url = action + '?filename=' + encodeURIComponent(filename);
}
if(options['params']){
for(var i = 0, n = options['params'].length; i < n; i++){
for(param in options['params'][i]){
url += '&' + encodeURIComponent(param) + '=' + encodeURIComponent(options['params'][i][param]);
}
}
}
return url;
}
var result = this.each(function(){
var elm = this;
if(window.addEventListener){
elm.addEventListener(
'dragstart',
function(e){
_onDragstart(this);
e.preventDefault();
},
false
);
elm.addEventListener(
'dragenter',
function(e){
_onMouseover(this);
e.preventDefault();
},
false
);
elm.addEventListener(
'dragover',
function(e){
_onMouseover(this);
e.preventDefault();
},
false
);
elm.addEventListener(
'dragout',
function(e){
_onMouseout(this);
e.preventDefault();
},
false
);
elm.addEventListener(
'drop',
function(e){
e.preventDefault();
var files = e.dataTransfer.files;
var total = 0;
var loaded = 0;
var progress = 0;
var counter = 0;
var xcounter = 0;
var response = [];
$(this).addClass('wait');
for(var i = 0; i < files.length; i++){
if($.inArray(files[i].type, options['allowedMimetypes']) > -1){
var xhr = new XMLHttpRequest();
total = total + files[i].size;
xhr.upload.onprogress = function(e){
loaded = loaded + e.loaded;
if(typeof options['onProgress'] === 'function'){
options['onProgress']((loaded / total) * 100 + "%");
}
}
xhr.upload.onload = function(e){
counter++;
if(i === counter){// upload is finished
if(typeof options['onComplete'] === 'function'){
options['onComplete']();
}
$(this).removeClass('wait');
if(typeof options['onProgress'] === 'function'){
options['onProgress'](0);
}
}
else{
}
}
var filename = files[i].name;
var action = _getAction(options['action'], files[i].fileName);
xhr.open('post', action);
xhr.onreadystatechange = function(e){
if(this instanceof XMLHttpRequest && this.readyState === 4){
xcounter++;
try{
response.push(this.responseText);
if(i === xcounter){// upload is finished
$(this).removeClass('wait');
if(typeof options['onProgress'] === 'function'){
options['onProgress'](0);
}
options['onComplete'](response);
}
else{
}
}
catch(e){
if(typeof options['onError'] === 'function'){
options['onError']();
}
}
}
}
xhr.send(files[i]);
}
else{
if(i === counter){// upload is finished
if(typeof options['onComplete'] === 'function'){
options['onComplete']();
}
$(this).removeClass('wait');
if(typeof options['onProgress'] === 'function'){
options['onProgress'](0);
}
}
counter++;
}
}
},
false
);
}
});
return result;
}
})(jQuery);
クロスブラウザにしないとなー♪((Ｏ(〃⌒∇⌒〃)Ｏ))♪
TrackBack URL :
Comments (0)
コメントはまだありません»
No comments yet.
RSS feed for comments on this post.TrackBack URL
Leave a comment