Code d'implémentation de l'image de téléchargement JS-tutoriel php-php.cn

Code d'implémentation de l'image de téléchargement JS

小云云

Libérer： 2023-03-20 22:30:02

original

1863 Les gens l'ont consulté

Cet article partage principalement avec vous le code d'implémentation du téléchargement d'images JS. Cet article le partage principalement avec vous sous forme de code.

<!doctype html>
<html>
<head>
<meta name="baidu-site-verification" content="U4mw2VL8NF"/>
<meta charset="utf-8">
   <title>上传图片</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
@media (min-width: 990px) {
.container {
width: 960px;
}
}
</style>
</head>
<body>
@include(&#39;header&#39;)
<img id="pic" style="width:100px;height:100px;border-radius:50%;"
src="/upload/thumbs/086fa7a88f4f4ab9fce23827a9fc6f22.jpg">
<input id="upload" name="file" accept="image/*" type="file" style="display: none"/>
<!-- <ul>
   <li style="width:23%;float:left;margin:10px;height:200px;background:#eee;">
   <img style="height:200px;width:100%;" src="/upload/thumbs/efb3fb08b062a55e28a0e15ad2228514.jpg" alt=""></li>
</ul> -->
</body>
</html>
<script>
$(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 = $(&#39;#upload&#39;)[0].files[0];
//console.log(pic)
var file = new FormData();
file.append(&#39;image&#39;, 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("<img src=&#39;/" + res + "&#39;>")
}
});
}
// 需要注意几点:
// fd.append(&#39;name&#39;, file);
// 这一句中的name是后台需要接受的file的name
</script>

Copier après la connexion

Recommandations associées :

Exemple de la façon dont PHP implémente le téléchargement de fichiers image en mode publication

thinkphp5 télécharge des images et génère des abréviations Méthode des vignettes

Télécharger des images en toute sécurité avec PHP

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!