图片（文件）预览上传
1.图片预览
Ⅰ.转成临时url的方式
| NO. | 步骤 |
|---|---|
| 1 | 要有type="file"的input才可以选择图片 |
| 2 | 用于预览效果的img |
| 3 | 上传图片后，显示预览，写一个事件（某些操作后再做一些事） 利用onchange值改变事件 |
| 4 | 将拿到的图片文件转成临时的url |
| 5 | 将临时url赋值给img的src属性 |
<body>
<!-- 要有type="file"的input才可以选择图片 -->
<!-- 加multiple可以支持多选 -->
<input type="file" id="file" multiple>
<!-- 用于预览效果的img -->
<img src="" alt="" id="icon">
<script>
//获取图片预览元素
var icon = document.getElementById('icon')
//上传图片后，显示预览，写一个事件（某些操作后再做一些事） 利用onchange值改变事件
document.getElementById('file').onchange = function(){
//首先想办法拿到你选择的那张图片
//file元素有一个属性叫files，它是一个数组（为了支持多选管理），里面保存了你刚刚选择的那个图片/文件
console.log(this.files[0]);
//将文件转成URL的方案
//Ⅰ.转成临时URL:URL.createObjectURL(文件),临时URL会在页面关闭后失效
//Ⅱ.转成永久URL：选择文件后发ajax请求服务器→服务器把图片保存起来，再返回图片的永久路径
// 临时URL方案
var url = URL.createObjectURL(this.files[0]);
console.log(url);
icon.src = url;
}
</script>
</body>
Ⅱ.转成永久url的方式，引入ajax2.0，详情看代码注释！
| NO. | 步骤 |
|---|---|
| 1 | 要有type="file"的input才可以选择图片 |
| 2 | 用于预览效果的img |
| 3 | 上传图片后，显示预览，写一个事件（某些操作后再做一些事） 利用onchange值改变事件 |
| 4 | 将拿到的图片文件发送给服务器存储起来，再返回图片永久url |
| 5 | 将永久url赋值给img的src属性 |
以下代码需要配合php和apache才能运行
<!-- 要有type="file"的input才可以选择图片 -->
<!-- 加multiple可以支持多选 -->
<input type="file" id="file" multiple>
<!-- 用于预览效果的img -->
<img src="" alt="" id="icon">
<script>
//获取图片预览元素
var icon = document.getElementById('icon')
//上传图片后，显示预览，写一个事件（某些操作后再做一些事） 利用onchange值改变事件
document.getElementById('file').onchange = function(){
//1.上传图片发送给服务器，以前学的ajax不能异步上传文件，只能提交字符串形式
//2.最早上传文件只能用表单来进行，但是表单会有跳转页面的缺点
//由于上述的两点引入了ajax2.0，用FormData对象可以异步上传文件
var xhr = new XMLHttpRequest();
xhr.open('post',uploadPic.php);
//ajax2.0使用步骤
//Ⅰ.创建FormData对象
var fm = new FormData();
//Ⅱ.调用对象的append方法，添加要给服务器提交的文件
//参数1：键，参数2：值
//键的作用：就是让服务器通过这个键获取你的值
fm.append('icon',this.files[0]);
//Ⅲ.send里传递FormData对象就行了
//FormData会自动设置请求头，不用再设置
console.log(fm);
xhr.send(fm);
xhr.onload = function(){
icon.src = xhr.responseText;
}
}
</script>
2.图片（文件）上传：以前都是用表单上传文件，但是页面会跳转，现在有了ajax2.0
Ⅰ.原生js运用ajax2.0
<body>
<form action="">
<input type="text" placeholder="请输入姓名" name="name">
<input type="text" placeholder="请输入年龄" name="age">
<input type="text" placeholder="请输入职业" name="job">
<input type="text" placeholder="请输入薪资" name="salary">
<input type="file" name="icon">
</form>
<input type="button" id="btn" value="点我收集数据并ajax提交给服务器">
<script>
//找到表单
var form = document.querySelector('form');
//找到所有的input
var input = document.getElementsByTagName('input')
document.getElementById('btn').onclick = function(){
//创建请求对象
var xhr = new XMLHttpRequest();
//设置请求行
xhr.open('post','data.php')
//创建FormData对象
var fm = new FormData();
// 方法一:键值对一一对应添加
//这种方法太low
// fm.append('name',input[0].value);
// fm.append('age',input[1].value);
// fm.append('job',input[2].value)
// fm.append('salary',input[3].value)
// fm.append('icon',input[4].files[0])
//方法二：
//创建FormData对象,并传入表单对象
//如果传入表单对象，会自动找到表单里所有带name属性的表单元素
//name的值作为键，它的内容作为值提交给服务器
//跟jQuery的表单序列化很像，表单序列化拿不到file文件
//注意：这里只能传DOM的表单对象，不能传jQuery对象！
var fm = new FormData(form);
//发送请求
xhr.send(fm);
//监听响应完成事件
xhr.onload = function(){
console.log(xhr.responseText);
}
}
</script>
</body>
Ⅱ.jQuery运用ajax2.0
<body>
<form action="">
<input type="text" placeholder="请输入姓名" name="name">
<input type="text" placeholder="请输入年龄" name="age">
<input type="text" placeholder="请输入职业" name="job">
<input type="text" placeholder="请输入薪资" name="salary">
<input type="file" name="icon">
</form>
<input type="button" id="btn" value="点我收集数据并jQuery的ajax提交给服务器">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
$('#btn').click(function(){
//直接用FormData对象获取表单里的值
var fm = new FormData($('form')[0]);
//底下直接用data:fm会报错
//原因一：jQuery发ajax请求的时候会自动把data的对象转成字符串
//因为fm也是一个对象，jQuery也想把它转成字符串，但转不成功，报错
//解决办法：告诉jQuery，你不用帮我做转换，增加底下这句
//processData:false
//原因二：jQuery会自动帮我们设置请求头，但是Formdata也会设置请求头
//两个一起设置冲突了
//解决办法：告诉jQuery,你不要帮我设置请求头，增加底下这句
//contentType:false
$.ajax({
type:"post",
url:"data.php",
data:fm,
processData:false,
contentType:false,
success:function(obj){
console.log(obj);
}
})
})
</script>
</body>
3.vue中的图片预览与上传
Element-UI中的Upload 上传组件
传送门http://element-cn.eleme.io/#/zh-CN/component/upload，查看用户头像上传
//html代码
<el-form :model="formData" enctype="multipart/form-data">
<el-form-item label="反馈类型" :label-width="formLabelWidth">
<el-select class="selects" v-model="formData.type" placeholder="请选择您的提交类型">
<el-option label="需求" value="需求"></el-option>
<el-option label="缺陷" value="缺陷"></el-option>
</el-select>
</el-form-item>
<el-form-item label="反馈标题" :label-width="formLabelWidth">
<el-input v-model="formData.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="反馈内容" :label-width="formLabelWidth">
<el-input type="textarea" v-model="formData.content" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="上传照片" :label-width="formLabelWidth">
//action 必选参数，上传的地址
//：show-file-list 是否显示已上传文件列表
//：on-success 文件上传成功时的钩子
//：before-upload 上传文件文件之前的钩子，参数为上传的文件
<el-upload
class="avatar-uploader"
:action="UploadUrl()"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload">
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
</el-form>
//js代码
//data中的数据
data() {
return {
formData: {
name: "",
content: "",
type: "",
icon: ""
},
formLabelWidth: "120px",
imageUrl: ''
};
}
//methods中添加方法
handleAvatarSuccess(res, file) {
//图片预览
this.imageUrl = URL.createObjectURL(file.raw);
//将文件添加给formData对象的icon属性，用于上传
this.formData.icon = file.raw;
}
本文同步发表在我的个人博客：https://www.lubaojun.com/
网友评论