jquery的插件，關於上傳下載的js操作

</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 input
			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.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的插件，並從前臺到後臺對應的一個功能，是相對獨立的模塊化的東西。