爱站程序员基地最近使用 jQuery 的插件 ajaxFileUpload.js，使用Bootstrap 的样式，配合php，实现了一个简单的上传功能，简单记录了一下。
以下是部署步骤：
1、在网页顶部引入Bootstrap上传样式以及按钮样式：
<link href=\"/assets/global/plugins/bootstrap/css/bootstrap.min.css\" rel=\"stylesheet\" type=\"text/css\"><link href=\"/assets/global/plugins/bootstrap-fileinput/bootstrap-fileinput.css\" rel=\"stylesheet\" type=\"text/css\"/><style>.btn.default {color: #333333;background-color: #E5E5E5;}</style>
2、在网页底部引入jQuery、Bootstrap上传js、ajaxFileUpload插件：
<script src=\"/assets/global/plugins/jquery.min.js\" type=\"text/javascript\"></script><script src=\"/assets/global/plugins/bootstrap-fileinput/bootstrap-fileinput.js\" type=\"text/javascript\"></script><script src=\"/ajaxfileupload.js\" type=\"text/javascript\"></script>
3、php网页 fileUpload.php HTML代码：
<div class=\"fileinput <?php if( !empty($v[\'files\']) ){ echo \'fileinput-exists\'; }else{ echo \'fileinput-new\'; }?>\" data-provides=\"fileinput\"><div class=\"fileinput-new thumbnail\" style=\"width: 150px; height: 150px;\"><img src=\"http://www.placehold.it/150x150/EFEFEF/AAAAAA&text=no+image\" alt=\"\"/></div><div class=\"fileinput-preview fileinput-exists thumbnail\" style=\"max-width: 150px; max-height: 150px;\"><?php if( !empty($v[\'files\']) ){ echo \'<img src=\"/images/upfiles/\' . $v[\'files\'] . \'\"/>\'; }?></div><div><span class=\"btn default btn-file\"><span class=\"fileinput-new\"> 选择 </span><span class=\"fileinput-exists\"> 修改 </span><input type=\"file\" id=\"upfile<?php echo $v[\'id\'];?>\" name=\"upfile<?php echo $v[\'id\'];?>\"></span><a href=\"javascript:;\" class=\"btn default fileinput-exists\" data-dismiss=\"fileinput\"> 移除 </a><a href=\"javascript:void(0);\" onclick=\"ajaxFileUpload(\'<?php echo $v[\'id\'];?>\')\" class=\"btn default fileinput-exists\"> 提交 </a></div></div>
4、php网页 fileUpload.php JavaScript代码：
function ajaxFileUpload(id){$.ajaxFileUpload({url:\'/ajaxFileUpload\', //处理上传文件的服务端data:{id:id},secureuri:false,fileElementId:\'upfile\'+id,dataType: \'json\',success: function (data){alert(data.msg);}})}
5、php后台代码：
//打开网页，使用了CI框架public function fileUploadView(){//此处可添加读取数据库代码，获取已上传文件相关数据$data = array();$data[\'id\'] = \'your file id\';$data[\'files\'] = \'your file name\';$this->_data[\'v\'] = $data;$this->load->view(\'fileUpload\', $this->_data);}//处理上传文件的服务端代码public function ajaxFileUpload(){$id = $this->input->post(\'id\');$upfile = $_FILES[\'upfile\' . $id];$error = $upfile[\'error\']; //错误码，正常为0$name = $upfile[\'name\']; //文件名$size = $upfile[\'size\']; //文件大小-字节$tmp_name = $upfile[\'tmp_name\']; //服务器临时文件路径$type = $upfile[\'type\']; //图片类型如\"image/png\"//新文件名（files+时间戳+随机数+原文件类型）$filetype = substr($name, strripos($name, \".\") + 1);$newname = \"files\" . time() . (string)rand(100, 999) . \".\" . $filetype;//上传文件路径（上传文件目录+新文件名）//FCPATH 配置的项目路径$upfilespath = FCPATH . \'/webroot/images/upfiles/\' . $newname;$flag = @move_uploaded_file($tmp_name, $upfilespath);if ($flag === FALSE) {echo json_encode(array(\'msg\' => \'error\'));} else {//此处可添加更新数据库代码echo json_encode(array(\'msg\' => \'ok\'));}}
将以上代码结合起来就可以完成上传功能了。
上传选择前效果图：
上传选择后效果图：
附：
ajaxfileupload.js 网上有很多版本，此处记录一下源码防止后续版本更新后不能再使用，源码：
jQuery.extend({createUploadIframe: function (id, uri) {//create framevar frameId = \'jUploadFrame\' + id;var iframeHtml = \'<iframe id=\"\' + frameId + \'\" name=\"\' + frameId + \'\" style=\"position:absolute; top:-9999px; left:-9999px\"\';if (window.ActiveXObject) {if (typeof uri == \'boolean\') {iframeHtml += \' src=\"\' + \'javascript:false\' + \'\"\';}else if (typeof uri == \'string\') {iframeHtml += \' src=\"\' + uri + \'\"\';}}iframeHtml += \' />\';jQuery(iframeHtml).appendTo(document.body);return jQuery(\'#\' + frameId).get(0);},createUploadForm: function (id, fileElementId, data) {//create formvar formId = \'jUploadForm\' + id;var fileId = \'jUploadFile\' + id;var form = jQuery(\'<form action=\"\" method=\"POST\" name=\"\' + formId + \'\" id=\"\' + formId + \'\" enctype=\"multipart/form-data\"></form>\');var oldElement = jQuery(\'#\' + fileElementId);var newElement = jQuery(oldElement).clone();jQuery(oldElement).attr(\'id\', fileId);jQuery(oldElement).before(newElement);jQuery(oldElement).appendTo(form);//添加参数支持if (data) {$.each(data, function (key, value) {$(\"<input type=\'hidden\' name=\'\" + key + \"\' value=\'\" + value + \"\'/>\").appendTo(form);})}//set attributesjQuery(form).css(\'position\', \'absolute\');jQuery(form).css(\'top\', \'-1200px\');jQuery(form).css(\'left\', \'-1200px\');jQuery(form).appendTo(\'body\');return form;},ajaxFileUpload: function (s) {// TODO introduce global settings, allowing the client to modify them for all requests, not only timeouts = jQuery.extend({}, jQuery.ajaxSettings, s);var id = new Date().getTime()var form = jQuery.createUploadForm(id, s.fileElementId, s.data);var io = jQuery.createUploadIframe(id, s.secureuri);var frameId = \'jUploadFrame\' + id;var formId = \'jUploadForm\' + id;// Watch for a new set of requestsif (s.global && !jQuery.active++) {jQuery.event.trigger(\"ajaxStart\");}var requestDone = false;// Create the request objectvar xml = {}if (s.global)jQuery.event.trigger(\"ajaxSend\", [xml, s]);// Wait for a response to come backvar 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 notmodifiedif (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 dataif (s.success)s.success(data, status);// Fire the global callbackif (s.global)jQuery.event.trigger(\"ajaxSuccess\", [xml, s]);} elsejQuery.handleError(s, xml, status);} catch (e) {status = \"error\";jQuery.handleError(s, xml, status, e);}// The request was completedif (s.global)jQuery.event.trigger(\"ajaxComplete\", [xml, s]);// Handle the global AJAX counterif (s.global && !--jQuery.active)jQuery.event.trigger(\"ajaxStop\");// Process resultif (s.complete)s.complete(xml, status);jQuery(io).unbind()setTimeout(function () {try {jQuery(io).remove();jQuery(form).remove();} catch (e) {jQuery.handleError(s, xml, null, e);}}, 100)xml = null}}// Timeout checkerif (s.timeout > 0) {setTimeout(function () {// Check to see if the request is still happeningif (!requestDone) uploadCallback(\"timeout\");}, s.timeout);}try {var form = jQuery(\'#\' + formId);jQuery(form).attr(\'action\', s.url);jQuery(form).attr(\'method\', \'POST\');jQuery(form).attr(\'target\', frameId);if (form.encoding) {jQuery(form).attr(\'encoding\', \'multipart/form-data\');}else {jQuery(form).attr(\'enctype\', \'multipart/form-data\');}jQuery(form).submit();} catch (e) {jQuery.handleError(s, xml, null, e);}jQuery(\'#\' + frameId).load(uploadCallback);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 contextif (type == \"script\")jQuery.globalEval(data);// Get the JavaScript object, if JSON is used.if (type == \"json\")eval(\"data = \" + data);// evaluate scripts within htmlif (type == \"html\")jQuery(\"<div>\").html(data).evalScripts();return data;},handleError: function( s, xhr, status, e ) {// If a local callback was specified, fire itif ( s.error ) {s.error.call( s.context || s, xhr, status, e );}// Fire the global callbackif ( s.global ) {(s.context ? jQuery(s.context) : jQuery.event).trigger( \"ajaxError\", [xhr, s, e] );}}})
