Plugin d'image de téléchargement jQuery sans actualisation-js tutoriel-php.cn

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

PHP中文网

Libérer： 2017-09-01 16:35:49

original

2377 Les gens l'ont consulté

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.

Plugin dimage de téléchargement jQuery sans actualisation

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>

Copier après la connexion

<. 🎜>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>

Copier après la connexion

3. Configuration du plug-in

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

Copier après la connexion

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[&#39;tmp_name&#39;]) || !$file[&#39;tmp_name&#39;]) {
    echo json_encode([&#39;code&#39; => 401, &#39;msg&#39; => &#39;没有文件上传&#39;]);
    return false;
}
if($file["error"] > 0) {
    echo json_encode([&#39;code&#39; => 402, &#39;msg&#39; => $file["error"]]);
    return false;
}

$upload_path = $_SERVER[&#39;DOCUMENT_ROOT&#39;]."/upload/";
$file_path   = &#39;http://&#39; . $_SERVER[&#39;HTTP_HOST&#39;]."/upload/";

if(!is_dir($upload_path)){
    echo json_encode([&#39;code&#39; => 403, &#39;msg&#39; => &#39;上传目录不存在&#39;]);
    return false;
}

if(move_uploaded_file($file["tmp_name"], $upload_path.$file[&#39;name&#39;])){
    echo json_encode([&#39;code&#39; => 200, &#39;src&#39; => $file_path.$file[&#39;name&#39;]]);
    return false;
}else{
    echo json_encode([&#39;code&#39; => 404, &#39;msg&#39; => &#39;上传失败&#39;]);
    return false;
}

Copier après la connexion

Plugin dimage de téléchargement jQuery sans actualisation