Heim > Web-Frontend > js-Tutorial > jQuery-Upload-Bild-Plugin ohne Aktualisierung

jQuery-Upload-Bild-Plugin ohne Aktualisierung

PHP中文网
Freigeben: 2017-09-01 16:35:49
Original
2376 Leute haben es durchsucht

Das ursprüngliche jQuery-Bild-Upload-Plug-in unterstützt serverseitiges Hochladen, Vorschau, Löschen, Vergrößern, Upload-Mengen- und Größenbeschränkungen sowie Rückruffunktionen vor, während und nach dem Hochladen.

jQuery-Upload-Bild-Plugin ohne Aktualisierung

Gebrauchsanweisung
1. Stellen Sie zuerst jQuery und das CSS und JS des Plug-Ins vor.

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

2. HTML-Struktur

<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>
Nach dem Login kopieren

3. Serverseitige Verarbeitung

Es gibt keine besonderen Einschränkungen für die serverseitige Verarbeitung, Solange der Server die vom Dateiformular übermittelten Daten akzeptiert und JSON nach der Verarbeitung der Formatdaten zurückgibt, müssen die JSON-Daten das src-Element enthalten, z. B. {'src':'
$("#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);
    }
});
Nach dem Login kopieren
http://www.gouguoyin.cn /template/default/images/avatar.jpg'}, das Folgende ist einfach mit PHP als Beispiel Demo


$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;
}
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonjQuery-Upload-Bild-Plugin ohne Aktualisierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage