Webuploader批量图片上传实战与实例代码

98 浏览量更新于2024-09-02 收藏 145KB PDF 举报

Webuploader 是一个强大的 JavaScript 图片上传组件，特别适合在 Web 开发中实现图片批量上传功能。本文档将详细介绍如何在 JSP 环境中集成 Webuploader，并提供一个实际的代码示例，以帮助开发者快速理解和上手批量图片上传。首先，你需要在项目中导入 Webuploader 的相关资源。这通常包括库文件和 CSS 文件，确保将其引入到你的 HTML 页面的 `<head>` 部分。例如： ```html <link rel="stylesheet" href="webuploader/css/webuploader.css"> <script src="webuploader/js/webuploader.min.js"></script> ``` 接下来，你需要在前端页面中创建用于图片上传的 UI 元素，如上面提供的代码片段所示。这部分包括一个输入框用于显示项目名称，一个容器 `uploader-thum-container` 包含一个文件列表 (`fileList`) 和一个选择按钮 (`filePicker`)，以及一个用于触发上传的按钮 (`btn-star`)。 `uploader-list` 是关键部分，它负责接收上传的图片。当用户选择多个图片时，它们会自动添加到这个列表中。Webuploader 的核心功能在于它提供了事件驱动的 API，如 `uploader.on('uploadsuccess', function(file, result) {...})`，允许你在图片上传成功后进行进一步处理。在 JSP 代码中，你需要初始化 Webuploader 并设置其配置。这通常在页面加载完成后的某个事件（如 `$(document).ready()`) 中进行。以下是一个简化的配置示例： ```javascript $(function() { var uploader = WebUploader.create({ // 设置服务器端图片上传地址 server: 'your-server-url/upload', // 配置文件接收者 pick: '#filePicker', // 选择文件的元素，这里是 `#filePicker` // 多选支持 multiple: true, // 自定义上传按钮 auto: true, // 不需用户点击，图片选择后自动上传 // 上传成功回调 onUploadSuccess: function(file, response) { var item = file.response; // 这里会包含服务器返回的文件信息 // 对文件信息进行处理，例如更新 UI 或存储到数据库 }, // 错误处理 onUploadError: function(err, file) { console.log('上传出错', err, file); } }); // 当用户点击“开始上传”按钮时，触发上传 $('#btn-star').click(function() { uploader.upload(); }); }); ``` 在这个配置中，你需要根据实际情况替换 `'your-server-url/upload'` 为你实际的图片上传接口。同时，根据需求，你可能还需要调整其他配置项，如限制文件类型、设置上传进度条等。 Webuploader 提供了一个易用且功能强大的工具，让你能够轻松实现在 Web 应用中批量上传图片的功能。通过结合 JSP 的动态模板和前端的交互设计，可以构建出高度可扩展和用户体验良好的图片上传界面。希望这个实例能对你在项目开发中实现图片批量上传起到参考作用。

webuploader 实现图片批量上传功能附实例代码实现图片批量上传功能附实例代码

主要介绍了webuploader 实现图片批量上传功能，非常不错，具有参考借鉴价值,需要的朋友可以参考下

1、导入资源

2、JSP代码

<label class="form-label col-xs-4 col-sm-2"><span

class="c-red">*</span>项目名称：</label>

<input type="text" class="input-text" value="${proName }"

placeholder="" id="" name="proName" readonly="readonly">

</div>

<button id="btn-star"

class="btn btn-default btn-uploadstar radius ml-10">开始上传</button>

</div>

<label class="form-label col-xs-4 col-sm-2"><span

class="c-red">*</span>项目发票上传：</label>

<p>或将照片拖到这里，单次最多可选300张</p>

</div>

</div>

</div>

<button

onClick="article_add('','invoiceVo/save?&projectId=${projectId}&invoiceScan=','10001');"

class="btn btn-primary radius" type="button">

<i class="Hui-iconfont"></i> 保存

</button>

</div>

3、Js代码

var imagePath=null;

function article_save() {

alert("刷新父级的时候会自动关闭弹层。");

window.parent.location.reload();

}

/*项目发票-添加*/

function article_add(title, url, w, h) {

if(imagePath){

var index = layer.open({

type : 2,

title : title,

content : url+imagePath

});

layer.full(index);

}else{alert("没有上传图片，请先上传图片");}

}

$(function() {

$('.skin-minimal input').iCheck({

checkboxClass : 'icheckbox-blue',

radioClass : 'iradio-blue',

increaseArea : '20%'

});

$list = $("#fileList"), $btn = $("#btn-star"), state = "pending",

uploader;

var uploader = WebUploader.create({

auto : true,

swf : 'lib/webuploader/0.1.5/Uploader.swf',// swf文件路径

// 文件接收服务端。

server : 'lib/webuploader/0.1.5/server/fileupload.php', // 文件接收服务端。

// 选择文件的按钮。可选。

// 内部根据当前运行是创建，可能是input元素，也可能是flash.

pick : '#filePicker',

// 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！

下载后可阅读完整内容，剩余8页未读，立即下载

weixin_38722193

粉丝: 5
资源: 908

Webuploader批量图片上传实战与实例代码

百度的webuploader上传插件.zip

webUploader上传demo 带php后台代码|源码-附件资源

在ASP.NET中实现多文件上传(示例源码)

Webuploader图片批量上传（C# Asp.Net）

WebUploader客户端批量上传图片 后台使用springMVC

mvc webuploader 上传图片

webuploader上传Demo实例源码下载

关于webuploader上传代码

WebUploader组件实现文件批量上传的示例分析

jQuery PHP图片批量上传代码.zip

最新资源

WebUploader客户端批量上传图片后台使用springMVC