快速Web Uploader来进行图片上传

最新推荐文章于 2021-10-25 22:29:30 发布

xuhh16

最新推荐文章于 2021-10-25 22:29:30 发布

阅读量327

点赞数

分类专栏：学习笔记文章标签： html php jquery

本文链接：https://blog.csdn.net/weixin_44130106/article/details/105693161

版权

学习笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

这两天在做后台的更改，其中有一处要用到图片上传。因为是第一次弄，所以就花了一天时间。。。没想到只不过是地址错了，一直绕圈子。过程还是很简单的
我是先到WebUploader官网，直接把Demo下载来下来直接用，然后看文档，找文章来了解的。
首先有一个html页面，把css和js给放进来。
我先把html代码放上来 - - -

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>WebUploader演示</title>
    <link rel="stylesheet" type="text/css" href="m/web/8/up/webuploader.css" />
    <link rel="stylesheet" type="text/css" href="m/web/8/up/upload/style.css" />
</head>
<body>
<div id="wrapper">
    <div id="container">
        <!--头部，相册选择和格式选择-->
        <div id="uploader">
            <div class="queueList">
                <div id="dndArea" class="placeholder">
                    <div id="filePicker"></div>
                    <p>或将照片拖到这里，单次最多可选300张</p>
                </div>
            </div>
            <div class="statusBar" style="display:none;">
                <div class="progress">
                    <span class="text">0%</span>
                    <span class="percentage"></span>
                </div><div class="info"></div>
                <div class="btns">
                    <div id="filePicker2"></div><div class="uploadBtn">开始上传</div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="m/web/8/up/upload/jquery.js"></script>
<script type="text/javascript" src="m/web/8/up/webuploader.js"></script>
<script type="text/javascript" src="m/web/8/up/upload/upload.js"></script>
</body>
</html>

再然后，修改upload.js内的

 uploader = WebUploader.create({
            pick: {
                id: '#filePicker',
                label: '点击选择图片'
            },
            formData: {
                uid: 123
            },
            dnd: '#uploader .queueList',
            paste: '#uploader',
            swf: '../Uploader.swf',
            chunked: false,
            chunkSize: 512 * 1024,
            server: '/m/web/8/up/fileupload.php',
      ......
        });
        //还有后面的
         $.ajax('../../server/preview.php', {
                            method: 'POST',
                            data: src,
                            dataType:'json'

要改的就是
swf：就是存放Uploader.swf文件的位置
server：你存放fileupload.php文件的位置
ajax右边括号内的 preview.php 文件的位置
这些步骤ok了就能上传成功
之后就是打开fileuoload.php和preview.php 这两个文件，找到这两个变量 targetDir 和 uploadDir。把右边引号内的文件内改成你想存放图片的文件位置，就比如我存放在和fileuoload.php和preview.php 这两个文件同级的位置内的文件夹 WiFi_Uncle 中，
$targetDir = ‘WiFi_Uncle_tmp’;
$uploadDir = ‘WiFi_Uncle’;
操作完这些就算大功告成了！
最后写下我这次的感想, 过程按我的想法就是，首先写一个html页面，通过post方法，发送到接受端，也就是后台php文件接受；再通过php文件来选择放置到你想要放置的文件内。
当然我看到的只是很浅的表面逻辑，更深的等我去慢慢探索吧。
最后的最后再夸下浏览器的开发者模式！！！一定要好好注意文件路径！真的出现错误了就打开浏览器的开发者模式看它的过程，能知道到底哪里错了，之前用的时候还没现在这么强烈的体验感… 可能是我菜了T.T
刚刚发现使用 display:none就失灵了，里面css样式失效了。找到了解决办法。来处： [https://blog.csdn.net/first236108/article/details/78063536?depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-3&utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-3]

<style>
	#filePicker div:nth-child(2){width:100%!important;height:100%!important;}
</style>

直接页面加上就行

xuhh16

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
快速Web Uploader来进行图片上传

这两天在做后台的更改，其中有一处要用到图片上传。因为是第一次弄，所以就花了一天时间。。。没想到只不过是地址错了，一直绕圈子。过程还是很简单的我是先到WebUploader官网，直接把Demo下载来下来直接用，然后看文档，找文章来了解的。首先有一个html页面，把css和js给放进来。我先把html代码放上来 - - -<!DOCTYPE html><html lang=...
复制链接

扫一扫