这两天在做后台的更改，其中有一处要用到图片上传。因为是第一次弄，所以就花了一天时间。。。没想到只不过是地址错了，一直绕圈子。过程还是很简单的
我是先到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>
直接页面加上就行
