ajaxImageUpload——一個jQuery圖片批量上傳插件

時間 2020-03-26

標籤 ajaximageupload 一個 jquery 圖片批量上傳插件欄目 JQuery 简体版

原文原文鏈接

ajaxImageUpload

原創jQuery圖片上傳插件，支持批量上傳、預覽、刪除、放大、上傳數量、上傳大小、追加方式配置以及上傳前、上傳中和上傳後的回調函數。javascript

演示地址：http://www.gouguoyin.cn/ajaxImageUpload/demophp

使用方法css

一、先引入jquery和插件的css和js，注意先引入jqueryjava

<link href="./css/upload.min.css" type="text/css" rel="stylesheet" />
<script src="https://cdn.staticfile.org/jquery/3.1.0/jquery.min.js"></script>
<script src="./js/upload.min.js"></script>

二、HTML結構jquery

<div class="upload-box1"></div>

<div class="upload-box2"></div>

三、插件配置ajax

$(".upload-box1").ajaxImageUpload({
    fileInput: 'file1', //上傳按鈕名，即input[type=file]的name值
    ajaxUrl: './upload1.php', //上傳的服務器地址
});

$(".upload-box2").ajaxImageUpload({
    fileInput: 'file2', //上傳按鈕名，即input[type=file]的name值
    ajaxUrl: './upload2.php', //上傳的服務器地址
});

四、服務端處理 json

服務端處理沒有特殊的限制，只要服務端接受file表單提交的數據處理後返回json格式數據，上傳成功返回的json數據裏必須含有code和src，其中code必須爲200，src是上傳後的圖片url，上傳失敗返回的json數據裏必須含有code和msg，其中code爲錯誤碼(不能是200)，msg爲錯誤信息。服務器

以./upload1.php爲例app

$file = $_FILES["file1"]; // 要和配置裏的fileInput保持一致
if(!isset($file['tmp_name']) || !$file['tmp_name']) {
    echo json_encode(['code' => 401, 'msg' => '沒有文件上傳']);
    return false;
}
if($file["error"] > 0) {
    echo json_encode(['code' => 402, 'msg' => $file["error"]]);
    return false;
}

$upload_path = dirname(__FILE__) . "/uploads/";
$file_path   = "./uploads/";

if(!is_dir($upload_path)){
    echo json_encode(['code' => 403, 'msg' => '上傳目錄不存在']);
    return false;
}

if(move_uploaded_file($file["tmp_name"], $upload_path.$file['name'])){
    echo json_encode(['code' => 200, 'src' => $file_path.$file['name']]);
    return true;
}else{
    echo json_encode(['code' => 404, 'msg' => '上傳失敗']);
    return false;
}

參數說明 函數

| 配置項 | 配置說明 | 必選 | 默認值 |
| --- | --- | --- | --- |
| fileInput | 上傳按鈕名，即input[type=file]的name值 | 是 | |
| ajaxUrl | ajax請求地址 | 是 | |
| imageUrl | 已上傳的圖片鏈接 | 否 | [] |
| ajaxData | 額外攜帶的json數據 | 否 | {} |
| allowZoom | 是否容許放大 | 否 |true |
| allowType | 容許上傳圖片的類型 | 否 | ["gif", "jpeg", "jpg", "bmp", "png"] |
| maxNum | 容許上傳圖片數量 | 否 | 3 |
| maxSize | 容許上傳圖片的最大尺寸，單位M | 否 |2 |
| appendMethod | 圖片追加方式，before/after | 否 | before |
| before | 上傳前回調函數 | 否 | |
| success | 單次上傳成功回調函數 | 否 | |
| complete | 所有上傳成功回調函數 | 否 | |
| error | 上傳失敗回調函數 | 否 | |