TP5 webuploader 单页面多实例上传图片 案例
在使用 webuploader上传文件过程中，如果同一个页面存在多个上传区域，可以参考本示例代码。
HTML 代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{:config('WEB_SITE_TITLE')}</title>
<link href="/static/admin/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
<link href="/static/admin/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
<link href="/static/admin/css/animate.min.css" rel="stylesheet">
<link href="/static/admin/css/plugins/switchery/switchery.css" rel="stylesheet">
<link href="/static/admin/css/style.min.css?v=4.1.0" rel="stylesheet">
<link href="/static/admin/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
</head> <link rel="stylesheet" type="text/css" href="/static/admin/webupload/webuploader.css">
<link rel="stylesheet" type="text/css" href="/static/admin/webupload/style.css">
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
<div class="row">
<div class="col-sm-12">
<div class="ibox float-e-margins">
<div class="ibox-content">
<form class="form-horizontal m-t" name="add" id="add" method="post" action="add_game_role">
<div class="hr-line-dashed"></div>
<div class="form-group">
<label class="col-sm-3 control-label">图片1：</label>
<div class="input-group col-sm-4">
<input type="hidden" id="data_photo" name="role_big_pic" >
<div id="bigFileList" class="uploader-list" style="float:right"></div>
<div style="float:left" ><span onClick="webUpload('bigFileList')" class="uploadImg" >选择图片</span></div>
<img id="img_data" height="100px" style="float:left;margin-left: 50px;margin-top: -10px;" src="/static/admin/images/no_img.jpg"/>
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<label class="col-sm-3 control-label">图片2：</label>
<div class="input-group col-sm-4">
<input type="hidden" id="data_photo" name="role_min_pic" >
<div id="minFileList" class="uploader-list" style="float:right"></div>
<div style="float:left" ><span onClick="webUpload('minFileList')" class="uploadImg" >选择图片</span></div>
<img id="img_data" height="100px" style="float:left;margin-left: 50px;margin-top: -10px;" src="/static/admin/images/no_img.jpg"/>
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<div class="col-sm-4 col-sm-offset-3">
<button class="btn btn-primary" type="submit"><i class="fa fa-save"></i> 保存</button>
<a class="btn btn-danger" href="javascript:history.go(-1);"><i class="fa fa-close"></i> 返回</a>
</div>
</div>
</form>
</div>
</div> </div>
</div>
</div>
<script type="text/javascript" src="/static/admin/webupload/webuploader.min.js"></script>
<script type="text/javascript"> var list;
function webUpload(id) {
list = $('#'+id);
console.log(id)
} //上传图片,初始化WebUploader
var uploader = WebUploader.create({ auto: true,// 选完文件后，是否自动上传。
swf: '/static/admin/js/webupload/Uploader.swf',// swf文件路径
server: "{:url('Upload/uploadPlus', ['folder'=> 'gamerole'])}",// 文件接收服务端。
duplicate :true,// 重复上传图片，true为可重复false为不可重复
pick: '.uploadImg',// 选择文件的按钮。可选。 accept: {
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/jpg,image/jpeg,image/png'
}, 'onUploadSuccess': function(file, data, response) {
list.prev().val('gamerole/' + data._raw); // 实际保存的图片地址字符串
list.next().next().attr('src', '/uploads/images/gamerole/' + data._raw).show(); // 显示新上传的图片
}
}); uploader.on( 'fileQueued', function( file ) {
list.html( '<div id="' + file.id + '" class="item">' +
'<h4 class="info">' + file.name + '</h4>' +
'<p class="state">正在上传...</p>' +
'</div>' ); // 显示图片名称 }); // 文件上传成功
uploader.on( 'uploadSuccess', function( file ) { $( '#'+file.id ).find('p.state').text('上传成功！');
}); // 文件上传失败，显示上传出错。
uploader.on( 'uploadError', function( file ) {
$( '#'+file.id ).find('p.state').text('上传出错!');
}); </script> </body>
</html>
服务端 PHP 代码：
// 图片上传
public function uploadPlus() {
$file = request()->file('file');
$folder = input('param.folder');
$dir = ROOT_PATH . 'public' . DS . 'uploads' . DS . 'images' . DS . $folder;
if (!is_dir($dir)) {
mkdir($dir,0777,true);
}
$info = $file->move($dir);
if($info){
echo $info->getSaveName();
}else{
echo $file->getError();
} }
未上传图片界面
上传图片后界面
TP5 webuploader 单页面多实例上传图片 案例的更多相关文章
- jQuery File Upload 单页面多实例的实现
jQuery File Upload 的 GitHub 地址:https://github.com/blueimp/jQuery-File-Upload 插件描述:jQuery File Upload ...
- webpack+react+antd 单页面应用实例
React框架已经火了好长一段时间了,再不学就out了! 对React还没有了解的同学可以看看我之前的一篇文章,可以快速简单的认识一下React.React入门最好的实例-TodoList 自己从开始 ...
- 新手vue构建单页面应用实例
本人写的小程序,功能还在完善中,欢迎扫一扫提出宝贵意见! 步骤: 1.使用vue-cli创建项目2.使用vue-router实现单页路由3.用vuex管理我们的数据流4.使用vue-resource请 ...
- 058——VUE中vue-router之实例操作新闻列表单页面应用与路由别名的使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 【干货】Laravel --Validate (表单验证) 使用实例
前言 : Laravel 提供了多种方法来验证应用输入数据.默认情况下,Laravel 的控制器基类使用ValidatesRequests trait,该trait提供了便利的方法通过各种功能强大的验 ...
- 基于angular的route实现单页面cnodejs
Angular ui-router 前言 之前不太理解前端怎么实现路由功能,以前知道有一种方式使用html5的pushState可以操作url才实现路由的功能,在实践项目中也用过一次,后来这种操作叫成 ...
- SpringMVC上传图片总结（2）--- 使用百度webuploader上传组件进行上传图片
SpringMVC上传图片总结(2)--- 使用百度webuploader上传组件进行上传图片 在上一篇文章中,我们介绍了< SpringMVC上传图片的常规上传方法 >.本文接着第一 ...
- vue第十四单元(认识单页面应用，理解vue-router的基本用法)
第十四单元(认识单页面应用,理解vue-router的基本用法) #课程目标 1.了解单页应用与多页应用以及各自的优缺点 2.掌握路由如何实现单页应用 3.精通路由的基本语法 #知识点 #一.单页应用 ...
- vue 单页面应用实战
1. 为什么要 SPA? SPA: 就是俗称的单页应用(Single Page Web Application). 在移动端,特别是 hybrid 方式的H5应用中,性能问题一直是痛点. 使用 SPA ...
随机推荐
- js超链接
_blank -- 在新窗口中打开链接 _parent -- 在父窗体中打开链接 _self -- 在当前窗体打开链接,此为默认值 _top -- 在当前窗体打开链接,并替换当前的整个窗体(框架页) ...
- 4.JavaScript
1.简介 JavaScript 是一种轻量级的编程语言,是一种动态类型.弱类型.基于原型的脚本语言. JavaScript,通常缩写为JS,是一种高级的,解释执行的编程语言.JavaScript是一门 ...
- Android实现异步的几种方法
在Android项目中,有经验的开发人员都知道,一些耗时的IO操作等都必须在子线程中去操作,那么可以有哪些方法来开启子线程呢,一般可以使用Java中自带的几种方法,也可以使用Andorid特有的一些类 ...
- 《ArcGIS Runtime SDK for Android开发笔记》——（8）、关于ArcGIS Android开发的未来（“Quartz”版Beta）
1.前言 今天再一次在官网看到了ArcGIS Runtime SDK for Android下一个版本“Quartz”版的更新资料,它将是一个非常重要的更新,包括API接口的重构和开发思路的调整.具体 ...
- 【Node.js】Stream（流）的学习笔记
最近学习使用Node.js创建http proxy server,少不了要跟Stream打交道.昨天开始查阅一些资料,多少有了一些粗浅了解.整理在这里,供学习之用. 从Node.js API文档中可知 ...
- lunix重启service network restart错误Job for network.service failed. See 'system 或Failed to start LSB: Bring
1.mac地址不对 通过ip addr查看mac地址,然后修改cd /etc/sysconfig/network-scripts/目录下的文件里面的mac地址 2.通过以下方法 systemctl s ...
- C# 对XML操作-实例
using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using Sy ...
- UI自动化录制工具----UI Recorder
1.系统和工具包 windows 7 64位 jdk,nodejs,webdriver,浏览器都放在工具包目录内.(晚上回去把文件上传到云盘,在分享给大家) 2.安装JDK和node.js 2.1 J ...
- leetcode： 哈希——two-sum，3sum，4sum
1). two-sum Given an array of integers, find two numbers such that they add up to a specific target ...
- 【转】批处理命令 For循环命令详解!
批处理for命令详解FOR这条命令基本上都被用来处理文本,但还有其他一些好用的功能!看看他的基本格式(这里我引用的是批处理中的格式,直接在命令行只需要一个%号)FOR 参数 %%变量名 IN (相关文 ...