js上传图片代码php,JS上传图片实现代码

本文主要和大家分享JS上传图片的实现代码，本文主要以代码的形式和大家分享，希望能帮助到大家。

上传图片

@media (min-width: 990px) {

.container {

width: 960px;

}

}

@include('header')

src="/upload/thumbs/086fa7a88f4f4ab9fce23827a9fc6f22.jpg">

$(function () {

$("#pic").click(function () {

$("#upload").click(); //隐藏了input:file样式后，点击头像就可以本地上传

$("#upload").on("change", function () {

var objUrl = getObjectURL(this.files[0]); //获取图片的路径，该路径不是图片在本地的路径

if (objUrl) {

$("#pic").attr("src", objUrl); //将图片路径存入src中，显示出图片

upimg();

}

});

});

});

//建立一個可存取到該file的url

function getObjectURL(file) {

var url = null;

if (window.createObjectURL != undefined) { // basic

url = window.createObjectURL(file);

} else if (window.URL != undefined) { // mozilla(firefox)

url = window.URL.createObjectURL(file);

} else if (window.webkitURL != undefined) { // webkit or chrome

url = window.webkitURL.createObjectURL(file);

}

return url;

}

//上传头像到服务器

function upimg() {

var pic = $('#upload')[0].files[0];

//console.log(pic)

var file = new FormData();

file.append('image', pic);

$.ajax({

url: "/uploadImg",

type: "post",

data: file,

cache: false,

contentType: false,

processData: false,

success: function (data) {

console.log(data);

var res = data;

//$("#resimg").append("")

}

});

}

// 需要注意几点:

// fd.append('name', file);

// 这一句中的name是后台需要接受的file的name

相关推荐：