Javascript-原生上传插件upload-at-click推荐及DIY修改

虫曰:

最近在做项目时,需要使用到上传功能哈~做人太懒了,所以找了一下发现upload-at-click这家伙很棒~可能是javascript原生开发的比较简单还好用的插件第一吧,虫子不经常使用所以不知道具体的哈,不管怎样还是推荐一下。以后要常用了,毕竟现在的项目都是在JQuery与Mootools之间相互切换,哎,不兼容是一个大问题。

插件网址:upload-at-click – Javascript for upload file at one click

2015.10.30 update http://upload-at-click.narod.ru/demo.html

插件号称一键上传,实际上使用是真的一键操作!而参数也才数个,配置不像其他的那么复杂。

需要插件的朋友可以点击上面的链接直接去下载,非常棒,值得拥有。

不过在实际项目中用,出现一个问题就是不想上传文件怎么办?

原插件中没有这个功能或者是我不懂吧,反正我自己改了一下哈,挺实用的噢,下面就是修改的过程噢,与您分享。

 

 

要修改插件,第一步是要下载文件,就一个文件噢,名字叫upclick-min.js,这个事压缩版的,格式基本不好看,不用怕,我们进入JavaScript/HTML格式化里面,将upclick-min.js里面的内容都拷贝到文本框内,点击格式化,然后,你就能看得懂代码了噢。

本来我想好好地研究一下这个的原理,然后发现里面的东西都是简短的变量头痛,就算了,不仔细研究了,直接就输入关键词onstart,然后就会找到一个地方,你要问我为什么选择这个关键词?其实这个事靠感觉的,有时候是没道理的,不过这个DIY教程里没有道理的也要瞎扯一个道理噢,选择这个关键词主要是因为这个插件支持两个事件(onstart,oncomplete),我用这个主要是想要找到相关的事件处理的逻辑,看看能不能模仿写一个哈。

我们找到的代码如下:

[code lang=”javascript”]

var o = function() {
if (b.value) {
var f = d.onstart;
f && f(b.value);
a.submit();
}
};

[/code]

这个逻辑我们一看,完蛋了!想要模仿写一个取消事件的功能,需要费很大的力!

因为这个逻辑中通直接就是将参数返给我们定制的开始事件处理函数,然后直接提交表单,开始上传!

既然我们知道他先执行我们定制的开始事件处理函数,然后才上传,那么我们要取消的话就是需要在这边提交表单,开始上传的时候下一个断点,加入我们的代码,破坏整个的上传流程。

所以,我就修改了下面的代码噢

[code lang=”javascript”]
var o = function() {
if (b.value) {
var f = d.onstart;
f && (err = f(b.value));
if(err!=false){
a.submit();
}else alert(error);
}
};[/code]

然后,修改就完成了噢,只要在onstart里面判断我们的条件,然后返回值,返回不是false的话都是可以直接上传,如果要破坏上传的话,那么就是返回true呗~顺便要设置一下error变量。

具体调用如下:

[code lang=”javascript”]
var uploader = document.getElementById(‘uploadbtn’);
upclick({
element: uploader,
dataname:’Filedata’,
maxsize:0,
action: ‘URL’,
onstart:function(filename){
if(countItems()<3){
var myElement = new Element(‘div’,{class:’pj-box-item’,html:'<input name="ShowImages[]" type="hidden" value="images/’+filename+’" /><img style="width:120px;height:160px;" src="images/’+filename+’"/>’});
PJboxitems.grab(myElement, ‘top’);
}else{
this.error = ‘对不起,您只能上传3张图片.’;//这个错误提示会被调用噢
return false;
}
},
oncomplete:function(response_data){
alert(response_data);
}
});[/code]

 

摘录原插件作者的教程噢,防止网站打不开~~

如何使用?

开发四步骤:

1. 增加脚本库链接:

   <script type="text/javascript" src="/path_to/upclick-min.js"></script>

2. 增加一个文件上传元素:

   <input type="button" id="uploader" value="Upload">

3. 调用 upclick() 方法:

   <script type="text/javascript">

   var uploader = document.getElementById('uploader');

   upclick(
     {
      element: uploader,
      action: '/path_to/you_server_script.php', 
      onstart:
        function(filename)
        {
          alert('Start upload: '+filename);
        },
      oncomplete:
        function(response_data) 
        {
          alert(response_data);
        }
     });

   </script>

4. 书写服务端程序.
上传数据的名字叫做: Filedata.

服务端脚本例子1

<?php
$tmp_file_name = $_FILES['Filedata']['tmp_name'];
move_uploaded_file($tmp_file_name, '/path_to/new_filename');

服务器脚本例子2

<?php
$tmp_file_name = $_FILES['Filedata']['tmp_name'];
$ok = move_uploaded_file($tmp_file_name, '/path_to/new_filename');

// This message will be passed to 'oncomplete' function
echo $ok ? "OK" : "FAIL";

参数表

全部的参数都保存在一个对象中.

可能的关键词如下:

Name Type Description Default
element object|string DOM element or element id
action string Server script who receive file
action_params object Server script parameters.
Example:
{name: ‘Amadeus’, family: ‘Mozart’}
{}
dataname string File data name ‘Filedata’
maxsize integer Maximum file size. In Bytes. 0 – unlimited (work in IE only) 0
target string Target window name for response. Like a _blank, _self, _top or some frame name
zindex integer|’auto’ z-index style property of listener ‘auto’
onstart function Callback function
Emited on start upload.
onstart(filename)
null
oncomplete function Callback function
Emited when file successfully uploaded
oncomplete(server_response_data)
null

如下浏览器已测试:

  • IE 6.0
  • FireFox 3.6
  • Chrome 6.0
  • Opera 10.63