目录
- html中文件上传
- jquery中文件的上传
- vue中文件的上传
一、HTML中怎么上传文件(html直接上传头像)
注意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>
二、Jquery中怎么上传文件(上传头像)
<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 () {
var newHeadImageTag = document.getElementById("newHeadImage");
if(newHeadImageTag.files.length==0){
alert("没有选择图片");
return;
}
var uploadFile = newHeadImageTag.files[0];
var src = window.URL.createObjectURL(uploadFile);
$("#img").attr("src",src);
}
function dealUpload () {
var newHeadImageTag = document.getElementById("newHeadImage");
if(newHeadImageTag.files.length==0){
alert("没有选择图片");
return;
}
var uploadFile = newHeadImageTag.files[0];
var formData = new FormData();
formData.append("m","user");
formData.append("a","changeHeadImage");
formData.append("userId","2");
formData.append("newHeadImage",uploadFile);
formData.append("token","");
var url = "http://127.0.0.1/project/artist-v3/api/index.php";
$.ajax({
type:"post",
url:url,
data:formData,
async:true,
processData:false,
contentType:false
}).done(function (r) {
var dict = JSON.parse(r);
alert("code="+dict.code+" desc="+dict.desc);
});
}
</script>
</body>
三、vue上传头像(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 (){
var newHeadImageTag = document.getElementById("newHeadImage");
if(newHeadImageTag.files.length==0){
alert("没有选择图片");
return;
}
var uploadFile = newHeadImageTag.files[0];
var formData = new FormData();
formData.append("m","user");
formData.append("a","changeHeadImage");
formData.append("userId","2");
formData.append("newHeadImage",uploadFile);
formData.append("token","");
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);
})
},
dealChange:function () {
var newHeadImageTag = document.getElementById("newHeadImage");
if(newHeadImageTag.files.length==0){
alert("没有选择图片");
return;
}
var uploadFile = newHeadImageTag.files[0];
var src = window.URL.createObjectURL(uploadFile);
this.src = src;
}
}
})
</script>
</body>