Disclaimer: This article is a blogger original article, shall not be reproduced without the bloggers allowed. https://blog.csdn.net/a5252145/article/details/85266517
table of Contents
- html file upload
- Jquery upload of files
- Upload files vue
A, HTML in how to upload files (html directly upload an avatar)
注意1：action中设置url
注意2：method一定是post
注意3：添加 enctype="multipart/form-data"
注意4：额外参数用过 hidden类型input标签添加
注意4：真正的图片, 通过file类型input上传
<body>
<form action="http://127.0.0.1/project/artist-v3/api/index.php" method="post" enctype="multipart/form-data">
<input type="file" name="newHeadImage" id="newHeadImage" value="" /><br>
<input type="hidden" name="m" id="m" value="user" />
<input type="hidden" name="a" id="a" value="changeHeadImage" />
<input type="hidden" name="userId" id="" value="2" />
<input type="hidden" name="token" id="" value="" />
<input type="submit" value="提交"/>
</form>
</body>
Two, Jquery in how to upload files (upload an avatar)
<body>
<input type="file" name="newHeadImage" id="newHeadImage" value="" onchange="dealChange()" multiple="multiple"/><br>
<div id="">
<button onclick="dealUpload()">提交</button>
</div>
<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function dealChange () {
//step1: 拿到图片
var newHeadImageTag = document.getElementById("newHeadImage");
// input type="file" 这个js标签带有熟悉 files
if(newHeadImageTag.files.length==0){
alert("没有选择图片");
return;
}
//alert("有图片");
var uploadFile = newHeadImageTag.files[0];
//alert("name="+uploadFile.name+" size="+uploadFile.size)
var src = window.URL.createObjectURL(uploadFile);
//blob:http://127.0.0.1:8020/1c3fccfd-d8d7-451d-8185-ac9220c8129d
//alert(src);
//显示图片
$("#img").attr("src",src);
}
function dealUpload () {
//step1: 拿到图片
var newHeadImageTag = document.getElementById("newHeadImage");
// input type="file" 这个js标签带有熟悉 files
if(newHeadImageTag.files.length==0){
alert("没有选择图片");
return;
}
//alert("有图片");
// 核心语句
var uploadFile = newHeadImageTag.files[0];
//step2: 生成formData
var formData = new FormData();
formData.append("m","user");
formData.append("a","changeHeadImage");
formData.append("userId","2");
formData.append("newHeadImage",uploadFile);
formData.append("token","");
//step3: 发起请求
var url = "http://127.0.0.1/project/artist-v3/api/index.php";
$.ajax({
type:"post",
url:url,
data:formData,
async:true,
// 下面这两行是必须加的，不然会报错
processData:false, //默认true, 会转化为查询字符串, 上传文件,不处理数据,
contentType:false
}).done(function (r) {
//r 是json字符串
var dict = JSON.parse(r);
alert("code="+dict.code+" desc="+dict.desc);
});
}
</script>
</body>
Three, vue upload an avatar (vue-resource)
<body>
<div id="app">
<input type="file" name="newHeadImage" id="newHeadImage" value="" v-on:change="dealChange"/><br>
<button v-on:click="dealUpload">提交</button>
</div>
<script src="vue/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="vue/vue-resource.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var data = {
src:""
}
var app = new Vue({
el:"#app",
data:data,
methods:{
dealUpload:function (){
//step1: 拿到图片
var newHeadImageTag = document.getElementById("newHeadImage");
// input type="file" 这个js标签带有熟悉 files
if(newHeadImageTag.files.length==0){
alert("没有选择图片");
return;
}
//alert("有图片");
// 核心语句
var uploadFile = newHeadImageTag.files[0];
//step2: 生成formData
var formData = new FormData();
formData.append("m","user");
formData.append("a","changeHeadImage");
formData.append("userId","2");
formData.append("newHeadImage",uploadFile);
formData.append("token","");
//step3: 发起请求
var url = "http://127.0.0.1/project/artist-v3/api/index.php";
this.$http.post(url,formData,function () {
}).then(function (r) {
var dict = r.data;
alert("code="+dict.code+" desc="+dict.desc);
//get请求 m=user&a=userInfo&userId=1
//image
//两件事情: localStorage.image = image
//
})
},
dealChange:function () {
//step1: 拿到图片
var newHeadImageTag = document.getElementById("newHeadImage");
// input type="file" 这个js标签带有熟悉 files
if(newHeadImageTag.files.length==0){
alert("没有选择图片");
return;
}
//alert("有图片");
var uploadFile = newHeadImageTag.files[0];
//alert("name="+uploadFile.name+" size="+uploadFile.size)
var src = window.URL.createObjectURL(uploadFile);
//blob:http://127.0.0.1:8020/1c3fccfd-d8d7-451d-8185-ac9220c8129d
//alert(src);
this.src = src;
}
}
})
</script>
</body>