使用ajaxfileupload.js实现ajax上传文件php版


Posted in Javascript onJune 26, 2014

 无论是PHP,还是其他的服务端脚本都提供了文件上传功能,实现起来也比较简单。而利用JavaScript来配合,即可实现Ajax方式的文件上传。虽然jQuery本身没有提供这样的简化函数,但有不少插件可以实现。其中,Phpletter.com提供的ajaxfileupload.js是一个轻量的插件,而且编写方式与jQuery提供的全局方法$.post()非常相似,简单易用。
不过,该插件实在太简化了,除了可提供需上传文件的路径外,也就不能传递额外的值到后台服务端。所以,我修改了一下该脚本,增加个一个data对象参数。

一、原理

我这里使用的是PHP作为服务端脚本,几乎在每本较少PHP的书上都会提到如何使用move_uploaded_file()方法来上传文件,这里我就不再细说了。我想说的是,利用Ajax上传的原理。
因为一直在使用jQuery库,所以当想到Ajax时,第一反应就是试试$.post()方法,利用各选择器得到file文件框中的value值,然后提交到后台服务端。当然,后来证明这是不行的。(正因为这问题,我还查了不少资料,网上还提供了不少ASP等方式的脚本,真不知道该说什么好。。)
回到正题,要实现Ajax方式上传,其实并不难,方法也有不少。而本文提到的Phpletter.com的ajaxfileupload.js插件就是使用iframe的方式。这也是在不使用JavaScript脚本时,要实现不刷新页面上传时常见的方法。(本博客bo-blog后台撰写日志就是用该方法)
而ajaxfileupload.js插件也很简单,就是先利用jQuery的选择器获得file文件上传框中的文件路径值,然后动态的创建一个iframe,并在里面建立一个新的file 文件框,提供post方式提交到后台。最后,返回结果到前台。

二、使用

ajaxfileupload.js插件的使用很简单。
前台HTML代码类似:

<script type="text/javascript">
$(#buttonUplod).click(function () {
 $.ajaxFileUpload ({
  url:'doajaxfileupload.php', //你处理上传文件的服务端
  secureuri:false, //与页面处理代码中file相对应的ID值
  fileElementId:'img',
  dataType: 'json', //返回数据类型:text,xml,json,html,scritp,jsonp五种
  success: function (data) {
   alert(data.file_infor);
  }
 })
});
</script>
<input id="img" type="file" size="45" name="img" >
<button id="buttonUpload" onclick="return ajaxFileUpload();">Upload</button>

后台doajaxfileupload.php脚本:

<?php
 $upFilePath = "../attachment/";
$ok=@move_uploaded_file($_FILES['img']['tmp_name'],$upFilePath);
 if($ok === FALSE){
  echo json_encode('file_infor'=>'上传失败');
 }else{
  echo json_encode('file_infor'=>'上传成功');
 }
?>

为了测试,可以使用类似下面的方式保存传递过来的变量值:

$file_info = var_export($_FILES,true);
$ok = file_put_contents("../attachment/file_info.txt",$file_info);
if ($ok) exit(json_encode('file_infor'=>'上传成功'));
exit (json_encode('file_infor'=>'上传失败'));

※ 注意
请留意HTML代码文件框中的标记:

1. id='img'是用于给ajaxfileupload.js插件的fileElementId:'img'识别的,jQuery选择器会利用该字符串获得文本框的值;
2. name='img'是用于通过post方式提交到后台脚本时,PHP通过$_FILES['img']读取上传文件的数据,若没有该值,$_FILES变量为空;

所以,这两个值缺一不可,也不可混淆。

三、支持额外参数

有时候,我们需要在后台根据某些变量来觉得对上传文件的处理。例如,更新文件。这时,就需要往同台再传递一些额外的参数。所以,我修改了ajaxfileupload.js插件:

addOtherRequestsToForm: function(form,data)
{
 // add extra parameter
 var originalElement = $('<input type="hidden" name="" value="">');
 for (var key in data) {
  name = key;
  value = data[key];
  var cloneElement = originalElement.clone();
cloneElement.attr({'name':name,'value':value});
  $(cloneElement).appendTo(form);
 }
 return form;
}, 

ajaxFileUpload: function(s) {
 // TODO introduce global settings, allowing the client to modify them for all requests, not only timeout  
 s = jQuery.extend({}, jQuery.ajaxSettings, s);
 var id = new Date().getTime()    
 var form = jQuery.createUploadForm(id, s.fileElementId);
 if ( s.data ) form = jQuery.addOtherRequestsToForm(form,s.data);
 var io = jQuery.createUploadIframe(id, s.secureuri);

红色标记部分是我添加的内容。这样,我就可以在前台HTML部分,通过类似下面的代码来传递额外的参数:

url:'doajaxfileupload.php', //你处理上传文件的服务端
secureuri:false, //与页面处理代码中file相对应的ID值
data:{'test':'test','ok':'ok'}, //以对象的方式传递,内容部分可输入JavaScript的变量值
fileElementId:'img',

后台处理脚本为:

array_push($_FILES,$_REQUEST);
$file_info = var_export($_FILES,true);
$ok = file_put_contents("../attachment/file_info.txt",$file_info);
if ($ok) exit(json_encode('file_infor'=>'上传成功'));
exit (json_encode('file_infor'=>'上传失败'));

可见,原理很简单,就是把额外的data对象内容一同加到iframe下的form中,传递到后台PHP脚本,以$_REQUEST等变量获得这些值。
后台输出保留的file_info.txt内容如下:

array (
  'file' =>
  array (
    'name' => 'firefox-java.txt',
    'type' => 'text/plain',
    'tmp_name' => 'D:\\Tools\\xampp\\tmp\\phpED45.tmp',
    'error' => 0,
    'size' => 250,
  ),
  0 =>
  array (
    'test' => 'test',
    'ok' => 'ok',
    'PHPSESSID' => 'e379fd4fb2abca6e802a1302805a5535',
  ),
)

ajaxfileupload.js:

jQuery.extend({
  createUploadIframe: function(id, uri)
 {
  //create frame
var frameId = 'jUploadFrame' + id;
if(window.ActiveXObject) {
var io = document.createElement('<iframe id="' + frameId + '" name="' + frameId + '" />');
if(typeof uri== 'boolean'){
io.src = 'javascript:false';
}
else if(typeof uri== 'string'){
io.src = uri;
}
}
else {
var io = document.createElement('iframe');
io.id = frameId;
io.name = frameId;
}
io.style.position = 'absolute';
io.style.top = '-1000px';
io.style.left = '-1000px'; 

document.body.appendChild(io); 

return io  
  },
  createUploadForm: function(id, fileElementId)
 {
 //create form 
 var formId = 'jUploadForm' + id;
 var fileId = 'jUploadFile' + id;
 var form = $('<form action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>'); 
 var oldElement = $('#' + fileElementId);
 var newElement = $(oldElement).clone();
 $(oldElement).attr('id', fileId);
 $(oldElement).before(newElement);
 $(oldElement).appendTo(form);
 //set attributes
 $(form).css('position', 'absolute');
 $(form).css('top', '-1200px');
 $(form).css('left', '-1200px');
 $(form).appendTo('body'); 
 return form;
  },
 addOtherRequestsToForm: function(form,data)
 {
 // add extra parameter
 var originalElement = $('<input type="hidden" name="" value="">');
 for (var key in data) {
  name = key;
  value = data[key];
  var cloneElement = originalElement.clone();
  cloneElement.attr({'name':name,'value':value});
  $(cloneElement).appendTo(form);
 }
 return form;
 }, 

  ajaxFileUpload: function(s) {
    // TODO introduce global settings, allowing the client to modify them for all requests, not only timeout 
    s = jQuery.extend({}, jQuery.ajaxSettings, s);
    var id = new Date().getTime()    
 var form = jQuery.createUploadForm(id, s.fileElementId);
 if ( s.data ) form = jQuery.addOtherRequestsToForm(form,s.data);
 var io = jQuery.createUploadIframe(id, s.secureuri);
 var frameId = 'jUploadFrame' + id;
 var formId = 'jUploadForm' + id; 
    // Watch for a new set of requests
    if ( s.global && ! jQuery.active++ )
 {
  jQuery.event.trigger( "ajaxStart" );
 }      
    var requestDone = false;
    // Create the request object
    var xml = {} 
    if ( s.global )
jQuery.event.trigger("ajaxSend", [xml, s]);
    // Wait for a response to come back
    var uploadCallback = function(isTimeout)
 {  
  var io = document.getElementById(frameId);
try
  {  
  if(io.contentWindow)
  {
   xml.responseText = io.contentWindow.document.body?io.contentWindow.document.body.innerHTML:null;
 xml.responseXML = io.contentWindow.document.XMLDocument?io.contentWindow.document.XMLDocument:io.contentWindow.document;
  }else if(io.contentDocument)
  {
   xml.responseText = io.contentDocument.document.body?io.contentDocument.document.body.innerHTML:null;
 xml.responseXML = io.contentDocument.document.XMLDocument?io.contentDocument.document.XMLDocument:io.contentDocument.document;
  }   
}catch(e)
  {
  jQuery.handleError(s, xml, null, e);
  }
if ( xml || isTimeout == "timeout")
  {  
requestDone = true;
var status;
try {
status = isTimeout != "timeout" ? "success" : "error";
// Make sure that the request was successful or notmodified
if ( status != "error" )
   {
// process the data (runs the xml through httpData regardless of callback)
var data = jQuery.uploadHttpData( xml, s.dataType );  
// If a local callback was specified, fire it and pass it the data
if ( s.success )
s.success( data, status );
// Fire the global callback
if( s.global )
jQuery.event.trigger( "ajaxSuccess", [xml, s] );
} else
jQuery.handleError(s, xml, status);
} catch(e)
  {
status = "error";
jQuery.handleError(s, xml, status, e);
} 

// The request was completed
if( s.global )
jQuery.event.trigger( "ajaxComplete", [xml, s] ); 

// Handle the global AJAX counter
if ( s.global && ! --jQuery.active )
jQuery.event.trigger( "ajaxStop" ); 

// Process result
if ( s.complete )
s.complete(xml, status); 

jQuery(io).unbind() 

setTimeout(function()
     { try
     {
      $(io).remove();
      $(form).remove(); 
     } catch(e)
     {
      jQuery.handleError(s, xml, null, e);
     }     

     }, 100) 

xml = null 

}
    }
    // Timeout checker
    if ( s.timeout > 0 )
 {
setTimeout(function(){
// Check to see if the request is still happening
if( !requestDone ) uploadCallback( "timeout" );
}, s.timeout);
    }
    try
 {
      // var io = $('#' + frameId);
  var form = $('#' + formId);
  $(form).attr('action', s.url);
  $(form).attr('method', 'POST');
  $(form).attr('target', frameId);
if(form.encoding)
  {
form.encoding = 'multipart/form-data';  
}
else
  {  
form.enctype = 'multipart/form-data';
}  
$(form).submit(); 

    } catch(e)
 {  
jQuery.handleError(s, xml, null, e);
    }
if(window.attachEvent){
document.getElementById(frameId).attachEvent('onload', uploadCallback);
    }
    else{
document.getElementById(frameId).addEventListener('load', uploadCallback, false);
    }  
    return {abort: function () {}}; 

  }, 

  uploadHttpData: function( r, type ) {
    var data = !type;
    data = type == "xml" || data ? r.responseXML : r.responseText;
    // If the type is "script", eval it in global context
    if ( type == "script" )
jQuery.globalEval( data );
    // Get the JavaScript object, if JSON is used.
    if ( type == "json" )
eval( "data = " + data );
    // evaluate scripts within html
    if ( type == "html" )
jQuery("<div>").html(data).evalScripts();
  //alert($('param', data).each(function(){alert($(this).attr('value'));}));
    return data;
  }
})
Javascript 相关文章推荐
用JS剩余字数计算的代码
Jul 03 Javascript
js表数据排序 sort table data
Feb 18 Javascript
js动态为代码着色显示行号
May 29 Javascript
jquery五角星评分插件示例分享
Feb 21 Javascript
JS将光标聚焦在文本最后的实现代码
Mar 28 Javascript
JavaScript弹出新窗口并控制窗口移动到指定位置的方法
Apr 06 Javascript
JS实现一次性弹窗的方法【刷新后不弹出】
Dec 26 Javascript
整理关于Bootstrap列表组的慕课笔记
Mar 29 Javascript
实例详解vue.js浅度监听和深度监听及watch用法
Aug 16 Javascript
vue打包相关细节整理(小结)
Sep 28 Javascript
javascript实现智能手环时间显示
Sep 18 Javascript
如何使用原生Js实现随机点名详解
Jan 06 Javascript
一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
Jun 26 #Javascript
php读取sqlite数据库入门实例代码
Jun 25 #Javascript
javascript基于HTML5 canvas制作画箭头组件
Jun 25 #Javascript
node.js学习总结之调式代码的方法
Jun 25 #Javascript
javascript获取元素偏移量的方法有哪些
Jun 24 #Javascript
Jquery之Bind方法参数传递与接收的三种方法
Jun 24 #Javascript
JQuery 在线引用及测试引用是否成功
Jun 24 #Javascript
You might like
php与XML、XSLT、Mysql的结合运用实现代码
2009/11/19 PHP
YII Framework框架教程之国际化实现方法
2016/03/14 PHP
thinkphp 验证码 的使用小结
2017/05/07 PHP
JS 自定义带默认值的函数
2011/07/21 Javascript
jquery toolbar与网页浮动工具条具体实现代码
2014/01/12 Javascript
js实现div弹出层的方法
2014/11/20 Javascript
SpringMVC框架下JQuery传递并解析Json格式的数据是如何实现的
2015/12/10 Javascript
使用jquery提交form表单并自定义action的实现代码
2016/05/25 Javascript
AngularJS 中的Promise --- $q服务详解
2016/09/14 Javascript
浅谈js中几种实用的跨域方法原理详解
2016/12/02 Javascript
前端开发之CSS原理详解
2017/03/11 Javascript
Angular中的$watch、$watchGroup、$watchCollection
2017/06/25 Javascript
微信小程序开发之tabbar图标和颜色的实现
2018/10/17 Javascript
JSON的parse()方法介绍
2019/01/31 Javascript
JS基础之逻辑结构与循环操作示例
2020/01/19 Javascript
python的几种开发工具介绍
2007/03/07 Python
Python实现从订阅源下载图片的方法
2015/03/11 Python
Python中struct模块对字节流/二进制流的操作教程
2017/01/21 Python
Python判断中文字符串是否相等的实例
2018/07/06 Python
Python递归函数 二分查找算法实现解析
2019/08/12 Python
pytorch 固定部分参数训练的方法
2019/08/17 Python
提升python处理速度原理及方法实例
2019/12/25 Python
OpenCV Python实现拼图小游戏
2020/03/23 Python
Tensorflow中的图(tf.Graph)和会话(tf.Session)的实现
2020/04/22 Python
Python批量删除mysql中千万级大量数据的脚本分享
2020/12/03 Python
英国卫浴商店:Ergonomic Design
2019/09/22 全球购物
亚洲航空公司官方网站:AirAsia
2019/11/25 全球购物
一套VC试题
2015/01/23 面试题
茶叶店创业计划书范文
2014/01/19 职场文书
动漫专业高职生职业生涯规划书
2014/02/15 职场文书
群众路线教育实践活动个人对照检查材料
2014/09/22 职场文书
党小组评议意见
2015/06/02 职场文书
家庭经济困难证明
2015/06/23 职场文书
《卧薪尝胆》读后感3篇
2019/12/26 职场文书
Java面试题冲刺第十九天--数据库(4)
2021/08/07 Java/Android
基于PyQt5制作一个群发邮件工具
2022/04/08 Python