Maison > Article > interface Web > Deux façons de télécharger des fichiers image à l'aide des frameworks natifs ajax et iframe

Deux façons de télécharger des fichiers image à l'aide des frameworks natifs ajax et iframe

韦小宝original: 2018-01-10 09:57:091571parcourir

Cet article présente principalement les deux méthodes du framework natif ajax et iframe pour implémenter l'image le téléchargement de fichiers en détail. Les amis qui ne sont pas familiers avec le téléchargement de fichiers ajax et qui sont intéressés par le téléchargement ajax peuvent s'y référer. Jetez un œil à cet article

Vous devriez être en mesure de citer plusieurs façons courantes d'implémenter la fonction de téléchargement de fichiers asynchrone. Les méthodes les plus fréquemment utilisées sont les frameworks ajax et iframe natifs pour réaliser le téléchargement de fichiers image. partagez les images avec vous. Il existe deux façons de télécharger des fichiers : ajax natif et framework iframe, pour votre référence, le contenu spécifique est le suivant

Méthode 1 : utilisez le framework iframe pour télécharger des images

🎜>

Le code html est le suivant :

<p class="frm">
<form name="uploadFrom" id="uploadFrom" action="upload.php" method="post" target="tarframe" enctype="multipart/form-data">
<input type="file" id="upload_file" name="upfile">
</form>
<iframe src="" width="0" height="0" style="display:none;" name="tarframe"></iframe>
</p>
<p id="msg">
</p>

fichier index.js :

$(function(){
$("#upload_file").change(function(){
$("#uploadFrom").submit();
});
});
function stopSend(str){
var im="<img src=&#39;upload/images/"+str+"&#39;>";
$("#msg").append(im);
}

fichier upload.php :

<php
$file=$_FILES[&#39;upfile&#39;];
$name=rand(0,500000).dechex(rand(0,10000)).".jpg";
move_uploaded_file($file[&#39;tmp_name&#39;],"upload/images/".$name);
//调用iframe父窗口的js 函数
echo "<script>parent.stopSend(&#39;$name&#39;)</script>";
?>

Méthode 2 : Téléchargement du fichier ajax original

<!DOCTYPE html>
<html>
<head>
<title>Html5 Ajax 上传文件</title>
<meta charset="utf-8">
<script type="text/javascript">
var xhr;
function createXMLHttpRequest()
{
if(window.ActiveXObject)
{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest)
{
xhr = new XMLHttpRequest();
}
}
function UpladFile()
{
var fileObj = document.getElementById("file").files[0];
var FileController = &#39;upload.php&#39;;
var form = new FormData();
form.append("myfile", fileObj);
createXMLHttpRequest();
xhr.onreadystatechange = handleStateChange;
xhr.open("post", FileController, true);
xhr.send(form);
}
function handleStateChange()
{
if(xhr.readyState == 4)
{
if (xhr.status == 200 || xhr.status == 0)
{
var result = xhr.responseText;
var json = eval("(" + result + ")");
alert(&#39;图片链接:n&#39;+json.file);
}
}
}
</script>
<style>
.txt{ height:28px; border:1px solid #cdcdcd; width:670px;}
.mybtn{ background-color:#FFF; line-height:14px;vertical-align:middle;border:1px solid #CDCDCD;height:30px; width:70px;}
.file{ position:absolute; top:0; right:80px; height:24px; filter:alpha(opacity:0);opacity: 0;width:260px }
</style>
</head>
<body>
<p class="form-group">
<label class="control-label">图片</label>
<br/>
<input type=&#39;text&#39; name=&#39;textfield&#39; id=&#39;textfield&#39; class=&#39;txt&#39; />
<span onclick="file.click()" class="mybtn">浏览...</span>
<input type="file" name="file" class="file" id="file" size="28" onchange="document.getElementById(&#39;textfield&#39;).value=this.value" />
<span onclick="UpladFile()" class="mybtn">上传</span>
</p>
</body>
</html>

Code php :

<?php
if(isset($_FILES["myfile"]))
{
$ret = array();
$uploadDir = &#39;images&#39;.DIRECTORY_SEPARATOR.date("Ymd").DIRECTORY_SEPARATOR;
$dir = dirname(FILE).DIRECTORY_SEPARATOR.$uploadDir;
file_exists($dir) || (mkdir($dir,0777,true) && chmod($dir,0777));
if(!is_array($_FILES["myfile"]["name"])) //single file
{
$fileName = time().uniqid().&#39;.&#39;.pathinfo($_FILES["myfile"]["name"])[&#39;extension&#39;];
move_uploaded_file($_FILES["myfile"]["tmp_name"],$dir.$fileName);
$ret[&#39;file&#39;] = DIRECTORY_SEPARATOR.$uploadDir.$fileName;
}
echo json_encode($ret);
}
?>

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à tout le monde d'apprendre et de comprendre les frameworks ajax et iframe pour télécharger des images. fichiers.

Recommandations associées :

Explication détaillée de l'utilisation d'AJAX pour effectuer une vérification asynchrone des noms d'utilisateur

Jquery et iframe pour créer un téléchargement ajax effet Partage d'exemples

JQuery Ajax utilise FormData pour télécharger des fichiers et d'autres exemples de données en détail

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：Exemple d'utilisation d'un événement composé jQuery combiné avec toggle()Article suivant：Exemple d'utilisation d'un événement composé jQuery combiné avec toggle()

Articles Liés

Voir plus