Sharing examples of html5 multiple image preview uploading and click-and-drag controls

I found a very useful control when uploading pictures. It supports uploading multiple pictures at the same time. You can click to select a 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 simple and basic. It can be used directly in the project.

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);  
        }  
    });  
});

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

Related recommendations:

PHP imitates WeChat multi-picture preview and upload function

H5 detailed example of completing multi-picture upload

Sample code for PHP uploading multiple files and images

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