h5 implements multiple image preview uploads and click-and-drag controls

This time I will bring you h5 to implement multiple image previewsUpload and click-to-drag controls, h5 to implement multi-image preview uploads and click-to-drag controlsNotesThere are Which ones, the following are practical cases, let’s take a look.

I found a very useful control when uploading pictures. It supports uploading multiple pictures at the same time. You can click to select the picture, or you can drag the picture to the upload box and upload it directly. It is convenient, easy to use, and the interface is also good. It’s simple and can basically be used directly in the project.

Take a look at his style first:

After selecting the picture:

$(function(){  
    // 初始化插件  
    $("#demo").zyUpload({  
        width            :   "650px",                 // 宽度  
        height           :   "400px",                 // 宽度  
        itemWidth        :   "120px",                 // 文件项的宽度  
        itemHeight       :   "100px",                 // 文件项的高度  
        url              :   "/upload/UploadAction",  // 上传文件的路径  
        multiple         :   true,                    // 是否可以多个文件上传  
        dragDrop         :   true,                    // 是否可以拖动上传文件  
        del              :   true,                    // 是否可以删除文件  
        finishDel        :   false,                   // 是否在上传文件完成后删除预览  
        /* 外部获得的回调接口 */  
        onSelect: function(files, allFiles){                    // 选择文件的回调方法  
            console.info("当前选择了以下文件：");  
            console.info(files);  
            console.info("之前没上传的文件：");  
            console.info(allFiles);  
        },  
        onDelete: function(file, surplusFiles){                     // 删除一个文件的回调方法  
            console.info("当前删除了此文件：");  
            console.info(file);  
            console.info("当前剩余的文件：");  
            console.info(surplusFiles);  
        },  
        onSuccess: function(file){                    // 文件上传成功的回调方法  
            console.info("此文件上传成功：");  
            console.info(file);  
        },  
        onFailure: function(file){                    // 文件上传失败的回调方法  
            console.info("此文件上传失败：");  
            console.info(file);  
        },  
        onComplete: function(responseInfo){           // 上传完成的回调方法  
            console.info("文件上传完成");  
            console.info(responseInfo);  
        }  
    });  
});

Directly in Modify the configuration in demo.js, url: "/upload/UploadAction" and put your image upload action. This control is just foreground processing, you have to write the background upload yourself

I believe you have mastered it after reading the case in this article Method, for more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

text-alignHow to achieve alignment at both ends

How to solve the problem of incomplete display of android textinput

Inheritance and prototype chain in JavaScript

The above is the detailed content of h5 implements multiple image preview uploads and click-and-drag controls. For more information, please follow other related articles on the PHP Chinese website!