Bootstrap-fileinput实现图片文件上传

Bootstrap-fileinput实现图片文件上传_第1张图片
Bootstrap-fileinput实现图片文件上传_第2张图片

html


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap-fileinput 实现图片上传title>

    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/bootstrap-fileinput/5.0.1/css/fileinput.min.css" rel="stylesheet">

    <script src="https://cdn.bootcss.com/jquery/2.2.2/jquery.js">script>

    
    <script src="https://cdn.bootcss.com/javascript-canvas-to-blob/3.14.0/js/canvas-to-blob.js">script>

    
    <script src="https://cdn.bootcss.com/bootstrap-fileinput/5.0.1/js/plugins/sortable.min.js">script>

    
    <script src="https://cdn.bootcss.com/dompurify/1.0.10/purify.min.js">script>

    
    <script src="https://cdn.bootcss.com/bootstrap-fileinput/5.0.1/js/fileinput.min.js">script>

    
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.6/js/bootstrap.min.js">script>

    
    <script src="https://cdn.bootcss.com/bootstrap-fileinput/5.0.1/js/locales/fa.min.js">script>

    
    <script src="https://cdn.bootcss.com/bootstrap-fileinput/5.0.1/js/locales/zh.min.js">script>

    
    <script src="/static/js/uploadPic.js">script>
head>

<body>

<div class="col-lg-3">
    <input id="uploadPicture" name="file" type="file" multiple=true class="file-loading">
div>

<input type="text" id="picName" value="Hello.MoCha"/>

body>
html>

uploadPic.js

$(function () {
    $("#uploadPicture").fileinput({
        uploadUrl: "/uploadPicFile",
        previewFileType: "image",
        uploadAsync: true,
        showCaption: false,
        allowedFileExtensions: ["png", "jpg", "jpeg", "ico", "bmp", "gif"],
        maxFileCount: 1,
        maxFileSize: 3072,
        showBrowse: true,
        dropZoneTitle: '拖拽商品图片到这里...',
        browseLabel: "选择商品图片",
        uploadClass: "btn btn-info",
        uploadLabel: "上传",
        removeClass: "btn btn-danger",
        autoReplace: true,
        removeLabel: "移除",
        msgSizeTooLarge: '图片文件太大!',
        msgFilesTooMany: "选择上传的文件数量为({n}) 超过允许的最大数值({m})!",
        msgUploadEnd: '图片上传成功!',
        msgUploadBegin: '初始化中...',
        msgZoomModalHeading: '图片详情预览',
        msgInvalidFileExtension: '非法文件扩展名 "{name}"! 仅支持 "{extensions}" 的文件扩展名!'
    }).on('fileerror', function (event, data, msg) {
        alert('图片上传失败!' + msg);
    }).on('fileuploaded', function (event, data) {
        $("#picName").val(data.response.name);
        $('#uploadPicture').fileinput('disable');
    }).on('fileclear', function (event) {
        alert("图片被清除啦!");
    });
    ;
});

你可能感兴趣的:(Java进化之旅)