您的位置：首页 > 编程语言 > PHP开发

webloader上传图片详细教程/使用thinkphp5.0（原创）

2017-03-03 14:34 495 查看

这个插件对后端程序员相当友好，无论是JAVA还是PHP，抑或python,基本只需要一句代码就能完成上传并且预览的效果，先上效果图，让你们眼馋一下

废话不说，直接撸代码，前端代码如下：

<html>
<head>
<link rel="stylesheet" type="text/css" href="/new/public/static/webuploader.css"><!-- 引用插件css -->
</head>
<body>

<div id="uploader-demo">
<!--用来存放item-->
<div id="fileList" class="uploader-list">
</div>
<div id="filePicker">选择图片</div>
</div>
</body>
<script type="text/javascript" src="/new/public/static/jquery-3.1.1.js"></script>  <!-- 引用jquery -->
<script type="text/javascript" src="/new/public/static/webuploader.js"></script>    <!-- 引用插件js -->

<script type="text/javascript">
var $list=$("#fileList");   //这几个初始化全局的百度文档上没说明，好蛋疼
var thumbnailWidth = 100;   //缩略图高度和宽度 （单位是像素），当宽高度是0~1的时候，是按照百分比计算，具体可以看api文档
var thumbnailHeight = 100;
var uploader = WebUploader.create({
// 选完文件后，是否自动上传。
auto: true,
// swf文件路径
swf: '/new/public/static/uploader.swf', //加载swf文件，路径一定要对

// 文件接收服务端。
server: '{:url("index/index/upload")}',

// 选择文件的按钮。可选。
// 内部根据当前运行是创建，可能是input元素，也可能是flash.
pick: '#filePicker',

// 只允许选择图片文件。
accept: {
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/'
}
});
//上传完成事件监听
uploader.on( 'fileQueued', function(file) {
var $li = $(
'<div id="' + file.id + '" class="file-item thumbnail">' +
'<img>' +
'<div class="info">' + file.name + '</div>' +
'</div>'
),
$img = $li.find('img');
// $list为容器jQuery实例
$list.append( $li );
// 创建缩略图
// 如果为非图片文件，可以不用调用此方法。
// thumbnailWidth x thumbnailHeight 为 100 x 100
uploader.makeThumb( file, function( error, src ) {
if ( error ) {
$img.replaceWith('<span>不能预览</span>');
return;
}
$img.attr( 'src', src );
}, thumbnailWidth, thumbnailHeight );
});
</script>
</html>

后端代码：

因为我是用的thinkphp5.0.7框架写的，里面封装了file类，就是完成文件的转移上传：

<?php
namespace app\index\controller;

use think\Controller;
use think\File;

class Index  extends Controller
{
public function index()
{
return $this->fetch();
}
function upload(){
$file = $this->request->file('file');//file是传文件的名称，这是webloader插件固定写入的。因为webloader插件会写入一个隐藏input，不信你们可以通过浏览器检查页面
$info = $file->move(ROOT_PATH . 'public' . DS . 'uploads');
}
}

撸完搞定，开森ING---------

thinkphp官网也有我本人写的文章，欢迎收藏。 http://www.thinkphp.cn/topic/46521.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航