Maison > Article > développement back-end > Code d'implémentation de l'image de téléchargement JS

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

小云云original: 2018-03-08 15:01:161853parcourir

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>

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Fonction PHP pour vérifier si le numéro de carte de crédit est correctArticle suivant：Fonction PHP pour vérifier si le numéro de carte de crédit est correct

Articles Liés

Voir plus