Plugin d'image de téléchargement jQuery sans actualisation

Le plug-in de téléchargement d'images jQuery d'origine prend en charge le téléchargement, l'aperçu, la suppression, l'agrandissement, les limites de quantité et de taille de téléchargement côté serveur, ainsi que les fonctions de rappel avant, pendant et après le téléchargement.

Instructions d'utilisation
1. Présentez d'abord jquery et les css et js du plug-in Notez que jquery est introduit en premier

<link href="./css/upload.css" type="text/css" rel="stylesheet" />
<script src="./js/jquery.js"></script>
<script src="./js/upload.js"></script>

<. 🎜>2. Structure HTML

<div class="upload-box">
    <p class="upload-tip">作品图片：最多可以上传5张图片，马上上传</p>
    <div class="image-box clear">
        <section class="upload-section">
            <div class="upload-btn"></div>
            <input type="file" name="file" id="upload-input" value=""/>
        </section>
    </div>
</div>

3. Configuration du plug-in

$("#upload-input").ajaxImageUpload({
    url: 'http://www.gouguoyin.cn/demo/store141.html', //上传的服务器地址
    data: { name:'勾国印' },
    maxNum: 3, //允许上传图片数量
    zoom: true, //允许放大
    allowType: ["gif", "jpeg", "jpg", "bmp",'png'], //允许上传图片的类型
    maxSize :2, //允许上传图片的最大尺寸，单位M
    before: function () {
        alert('上传前回调函数');
    },
    success:function(data){
        alert('上传成功回调函数');
        console.log(data);
    },
    error:function (e) {
        alert('上传失败回调函数');
        console.log(e);
    }
});

4. Traitement côté serveur

Il n'y a aucune restriction particulière sur le traitement côté serveur, tant que le serveur accepte les données soumises par le formulaire de fichier et renvoie json après traitement des données de format, les données json doivent contenir l'élément src, tel que {'src':'
http://www.gouguoyin.cn /template/default/images/avatar.jpg'}, ce qui suit est simple en utilisant PHP comme exemple Démo

$file = $_FILES["file"];
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 = $_SERVER['DOCUMENT_ROOT']."/upload/";
$file_path   = 'http://' . $_SERVER['HTTP_HOST']."/upload/";

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 false;
}else{
    echo json_encode(['code' => 404, 'msg' => '上传失败']);
    return false;
}

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!