image.png
文不对题：
今天在深圳天安云谷目睹了一场华为
emmmmm 事实上我也不知道他们在干嘛，反正我看他们玩的挺开心的
助理超级好看23333，再次为华为的助理模式点赞。
首先说明情况我是用的是 vue + 后端php CI框架 + Ajax
【正经】
XMLHttpRequest 是一个浏览器接口，通过它，我们可以使得 Javascript 进行 HTTP (S) 通信。XMLHttpRequest 在现在浏览器中是一种常用的前后台交互数据的方式。它有一些有趣的特性，比如 Formdata 。 Formdata是XMLHttpRequest 的一个对象利用它我们可以实现提交表单、模拟表单提交，当然最大的优势就是可以上传二进制文件。下面就具体介绍一下如何利用 FormData 来上传文件。这篇 emmmm 其实主要是用来给各位找回自信，下面我将讲一讲我是如何智商欠费的
- 首先看一下formData的基本用法：FormData对象
FormData对象可以把所有表单元素的name与value组成一个queryString，提交到后台。只需要把 form 表单作为参数传入 FormData 构造函数即可：
var form = document.getElementById("form1");
var fd = new FormData(form);
- 下面是HTML结构
<div class="flex1 changeHeadimg-imgdiv">
<div class="flex3"><div>当前头像</div></div>
<div class="flex4">
<img :src="src" alt="">
</div>
</div>
<div class="flex2 changeHeadimg-formdiv">
<form name="form1" id="form1">
<input type="file" name="photo" id="photo">
<div @click="gogogo" >提交</div>
</form>
</div>
此时显示为
image.png
*下面是点击事件触发的函数
gogogo:function(){
var form=document.getElementById("form1");
var fd =new FormData(form);//新建FormData对象，并把form表单的数据作为参数
$.ajax({
url: "http://127.0.0.1/bishegogogo/CI/img/test", //注意此处我使用了PHP CI框架 。项目名bishegogogo，img为CI框架下的控制器，test为控制器下的方法
type: "POST", //提交方式 我使用 post提交
data: fd, //传输数据
processData: false, // 告诉jQuery不要去处理发送的数据
contentType: false, // 告诉jQuery不要去设置Content-Type请求头
success: function(response,status,xhr);
var json=$.parseJSON(response);
var imgsrc = 'http://127.0.0.1/img/TX/' + json['photo'];//这里请注意引用
$("img").attr("src",imgsrc);//jquery更新 imgsrc
}
});
return false;
}
第一个智商税
再此说明一下，这里是我今天交的第一个智商税
我的思路是后端PHP接到数据后直接完成字符串拼接，返回一个完整的路径也就是
http://127.0.0.1/img/TX/xxxxxx.jpg
然后改一下src 岂不是美滋滋？？燃鹅！！！VUE会在链接前加上http://localhost:8080
然后就是一个凉凉夜色为你。。。。没解决，于是选择返回文件名，由前台完成字符串拼接来避免这个问题
回到正题
此时效果应当为
image.png
至此完成了 1.上传图片 2.保存在本地服务器 3.显示
- php代码
我这里使用PHP的CI框架 因为做毕设需要用到数据库，而我本身只会一点点抠脚的java和c，所以选择学习较为简单且文档友好的CI框架来始用PHP操作数据库
<?php
class img extends CI_Controller { //文件名img.php 即CI框架下的 控制器
public function test(){ //function test() 即 控制器下的方法
$localurl = '../../img/TX/';//第二个智商欠费
$filename = time().substr($_FILES['photo']['name'], strrpos($_FILES['photo']['name'],'.'));//为图片重命名
$imgurl = $localurl.$filename;//php拼接字符串始用 ‘ . ’ 等同于JS的 ‘ + ’
$response = array();
if(move_uploaded_file($_FILES['photo']['tmp_name'], $imgurl)){//move_uploaded_file函数
$response['isSuccess'] = true;
$response['photo'] = $filename;
}else{
$response['isSuccess'] = false;
}
echo json_encode($response);
}
}
?>
move_uploaded_file函数
有两个参数第一个参数需要指定将要移动的图片，第二个参数给定目标目录
也就是说从文件的临时存放目录，存到真正需要存储的目录
作为一个能吃（我不是胖 我只是肉多）能喝（rio ! 来来！我还能喝）的东北爷门，从来都是健健康康的，如果我有病的话，那病的名字一定是：菜。换句话说如果菜是罪的话我大概是死刑了
第二个智商欠费
我不知道！！PHP怎么！！用一个！！！行而有效 且 高端大气的方式 搞出来一个目标目录！我觉得CI框架应该有那么一个方式可以做到但是我不会
你不会百度么
百度都没百度到真是对不起
第三个智商欠费
我本来是将图片存放目录放在项目下也就是bishegogogo下的某个文件夹的
但是！！！前端就是访问不到，network里面200.。。。emmmm不明觉厉，是CI框架还是Apache会组织前端直接拿服务器的图片资源？？不明白。于是将目录放在了 服务器下跟项目同级的目录
网友评论