jquery的插件，关于上传下载的js操作

来源：互联网发布：hadoop2.7.1源码下载编辑：程序博客网时间：2024/04/28 21:42

</pre><pre name="code" class="javascript"><span style="font-family: Arial, Helvetica, sans-serif;">// 创建一个闭包</span>

(function($){var defaults = { name:"file", multiple:true,file:"[]"};$.fn.extend({        "construct":function(options){        var options = $.extend(defaults, options);        $(this).children().remove();        var name = options.name;    var i = options.i;    var fileObj = $(this);//添加添加文件按键及label布局var labelHtml = '<div  class="form-group">' //+ '<label for="'+name+'" class="col-md-1 control-label" style="font-size:15px" id="label_'+name+'">附件:</label>'//+ '<div class="col-md-8"></div>'+ '<div class="col-md-12" style="padding-left:0;">'+ '<button type="button" class="btn btn-defuult" id="addFileBtn" ><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> 添加附件</buton>'+ '</div>'+ '</div>';fileObj.append(labelHtml);//初始化文件数据var data = jQuery.parseJSON(options.file);$.each(data,function(k,v){var filehtml = '<div class="row">'+ '<div class="col-md-12" style="margin-top:20px;">'+ '<label  class="control-label" id="label_'+name+'">已选：</label>'+ '</div>'+ '<div class="col-md-8">'+ '<span style="display:inline-block;padding-top:7px;">'+data[k].name+'</span>'+ '<input type="hidden" style="display:inline-block;" name="fileName[]" value="'+data[k].name+'">'+ '<input type="hidden" style="display:inline-block;" name="fileSrc[]" value="'+data[k].src+'">'+ '</div>'+ '<div class="col-md-2">'+ '<button type="button" class="delFileBtn btn btn-warning">删除</buton>'+ '</div>'+ '</div>';fileObj.children().append(filehtml);$(".delFileBtn").click(function(){$(this).parent().parent().remove();});});//return;//最后跟上一个file inputvar uploadHtml = '<div class="row">' + '<div class="col-md-12" style="margin-top:20px;">'+ '<label for="'+name+'" class="control-label" id="label_'+name+'">文件：</label>'+ '</div>'+ '<div class="col-md-8">'+ '<input type="file" class="form-control" style="display:inline-block;" name="'+options.name+'[]">'+ '</div>'+ '<div class="col-md-2">'+ '<button type="button" class="delFileBtn btn btn-warning">删除</buton>'+ '</div>'+ '</div>';fileObj.children().append(uploadHtml);$(".delFileBtn").click(function(){if($(":input[type=file]").length == 1) {return;}$(this).parent().parent().remove();});//return;//添加文件按键的点击事件$("#addFileBtn").click(function(){i++;var uploadHtml = '<div class="row">' + '<div class="col-md-12" style="margin-top:20px;">'+ '<label for="'+name+'" class="control-label" id="label_'+name+'">文件：</label>'+ '</div>'+ '<div class="col-md-8">'+'<input type="file" class="form-control" style="display:inline-block;" name="'+options.name+'[]">'+ '</div>'+'<div class="col-md-2">'+ '<button type="button" class="delFileBtn btn btn-warning">删除</buton>'+ '</div>'+ '</div>';fileObj.append(uploadHtml);//每个删除按键的点击事件$(".delFileBtn").click(function(){if($(":input[type=file]").length == 1) {return;}$(this).parent().parent().remove();});});        }    });})(jQuery);

这是针对页面的一个上传下载的jquery插件，页面需要一个div，defaults是参数，name是div的id，file是json格式数据，保存之前上传的文件名称和路径,默认为[]，值格式为[{'src':"/uploads/test.jpg",'name':'test.jpg'}], 后台是php，原理是如果已经有上传的文件，用div展示已经上传的文件，再加上input新上传的文件，用户可随意删除已有的数据和新添加的数据，后台遍历这两种数据，合并后存到数据库

调用的话引入js文件，加上文件加入js代码

var options = { name:"image", multiple:false,file:file};$("#image_upload").construct(options);

页面代码是，保证id的前缀和就是里面options的name是相同的

<div id="image_upload"></div>

php后天的代码是

$attachment = array();                //方式2                if($_FILES["image"]) {                    $file = $_FILES["image"];                    foreach($file["name"] as $k => $v) {                        if ($file['error'][$k] == 0) {                            $fileExtension = strrchr($v, '.');                            $newFileName = uniqid(date("His")).$fileExtension;                            $relative_dir = '/uploads/prize/';                            move_uploaded_file($file["tmp_name"][$k], APPLICATION_PATH . "/../public" . $relative_dir.$newFileName);                            $filepath = $relative_dir.$newFileName;                            $attachment[] = array(                                "src" => $filepath,                                "name" => $v                            );                        }                    }                }                if ($_POST["fileName"] && $_POST["fileSrc"]) {                    foreach ($_POST["fileName"] as $k=>$v) {                        $attachment[] = array(                            "src" => $_POST["fileSrc"][$k],                            "name" => $_POST["fileName"][$k]                        );                    }                }                $image = Zend_Json::encode($attachment);

还有许多问题，暂时先这样，之后再优化。

这个的意义在于头一回写了jquery的插件，并从前台到后台对应的一个功能，是相对独立的模块化的东西。

0 0