jsp中点击图片弹出文件上传界面及实现预览实例详解

本文将会详细讲解“jsp中点击图片弹出文件上传界面及实现预览实例详解”的完整攻略。该攻略主要分为两个步骤：实现图片点击上传以及实现图片预览。下面我将分别讲解这两个步骤的具体实现。

实现图片点击上传

对于实现图片点击上传，我们需要用到一个比较流行的JS插件：webuploader。具体实现步骤如下：

1. 引入webuploader库

在jsp页面中引入webuploader库的js和css文件，如下所示：

<link rel="stylesheet" type="text/css" href="webuploader.css">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="webuploader.js"></script>

2. 添加html元素

在jsp页面中添加一个img标签用来显示图片，以及一个隐藏的input标签用来上传文件，如下所示：

<img id="img_preview" src="default.jpg" style="width:150px;height:150px;cursor:pointer;">
<input id="file_upload" type="file" style="display:none;">

3. 编写JS代码

在jsp页面中添加以下JS代码：

var uploader = new WebUploader.Uploader({
    // 设置自动上传文件
    auto: true,

    // swf文件路径
    swf: 'Uploader.swf',

    // 文件接收服务端。
    server: 'upload.php',

    // 文件上传域的name所指定的值。
    fileVal: 'file',

    // 选择文件的按钮。可选。
    pick: '#img_preview',

    // 上传文件最大限制
    fileSizeLimit: 1024 * 1024 * 5,

    // 文件类型
    accept: {
        title: 'Images',
        extensions: 'gif,jpg,jpeg,bmp,png',
        mimeTypes: 'image/*'
    }
});

// 当文件上传成功后，执行以下代码
uploader.on( 'uploadSuccess', function( file,response ) {
    var url = response.url;

    // 设置img标签的src属性为上传成功后的url
    $("#img_preview").attr("src", url);
});

// 当选择文件后，执行以下代码
$("#file_upload").change(function(){
    uploader.addFiles(this.files);
});

// 当img标签被点击后，弹出选择文件的窗口
$("#img_preview").click(function(){
    $("#file_upload").click();
});

以上代码实现了点击图片后弹出文件上传窗口，并将上传成功后的图片url设置为img标签的src属性值。

实现图片预览

对于实现图片预览，我们可以用另一个比较流行的JS插件：fancybox。具体实现步骤如下：

1. 引入fancybox库

在jsp页面中引入fancybox库的js和css文件，如下所示：

<link rel="stylesheet" href="fancybox.css" type="text/css" media="screen">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="fancybox.js"></script>

2. 添加html元素

在jsp页面中添加一个img标签，用来显示图片，如下所示：

<img id="img_preview" src="default.jpg" style="width:150px;height:150px;cursor:pointer;">

3. 编写JS代码

在jsp页面中添加以下JS代码：

// 当img标签被点击后，弹出图片预览窗口
$("#img_preview").click(function(){
    $.fancybox({
        href: $("#img_preview").prop("src"), // 获取img标签的src属性值
        type: 'image'
    });
});

以上代码实现了点击图片后弹出图片预览窗口。

示例1：点击图片上传

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>图片上传</title>
    <link rel="stylesheet" type="text/css" href="webuploader.css">
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="webuploader.js"></script>
</head>
<body>
    <img id="img_preview" src="default.jpg" style="width:150px;height:150px;cursor:pointer;">
    <input id="file_upload" type="file" style="display:none;">
    <script type="text/javascript">
        var uploader = new WebUploader.Uploader({
            // 设置自动上传文件
            auto: true,

            // swf文件路径
            swf: 'Uploader.swf',

            // 文件接收服务端。
            server: 'upload.php',

            // 文件上传域的name所指定的值。
            fileVal: 'file',

            // 选择文件的按钮。可选。
            pick: '#img_preview',

            // 上传文件最大限制
            fileSizeLimit: 1024 * 1024 * 5,

            // 文件类型
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*'
            }
        });

        // 当文件上传成功后，执行以下代码
        uploader.on( 'uploadSuccess', function( file,response ) {
            var url = response.url;

            // 设置img标签的src属性为上传成功后的url
            $("#img_preview").attr("src", url);
        });

        // 当选择文件后，执行以下代码
        $("#file_upload").change(function(){
            uploader.addFiles(this.files);
        });

        // 当img标签被点击后，弹出选择文件的窗口
        $("#img_preview").click(function(){
            $("#file_upload").click();
        });
    </script>
</body>
</html>

示例2：点击图片预览

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>图片预览</title>
    <link rel="stylesheet" href="fancybox.css" type="text/css" media="screen">
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="fancybox.js"></script>
</head>
<body>
    <img id="img_preview" src="default.jpg" style="width:150px;height:150px;cursor:pointer;">
    <script type="text/javascript">
        // 当img标签被点击后，弹出图片预览窗口
        $("#img_preview").click(function(){
            $.fancybox({
                href: $("#img_preview").prop("src"), // 获取img标签的src属性值
                type: 'image'
            });
        });
    </script>
</body>
</html>

以上就是实现“jsp中点击图片弹出文件上传界面及实现预览实例详解”的完整攻略，希望能够对你有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jsp中点击图片弹出文件上传界面及实现预览实例详解 - Python技术站

jsp中点击图片弹出文件上传界面及实现预览实例详解

实现图片点击上传

1. 引入webuploader库

2. 添加html元素

3. 编写JS代码

实现图片预览

1. 引入fancybox库

2. 添加html元素

3. 编写JS代码

相关文章