Le framework Ajax et iframe implémente le téléchargement de fichiers image (explication graphique et textuelle détaillée)-js tutoriel-php.cn

Le framework Ajax et iframe implémente le téléchargement de fichiers image (explication graphique et textuelle détaillée)

php中世界最好的语言

Libérer： 2018-04-04 16:40:12

original

2029 Les gens l'ont consulté

Cette fois, je vous apporte le framework ajax et iframe pour implémenter l'image téléchargement de fichier (explication détaillée de l'image et du texte), quelles sont les précautions pour le framework ajax et iframe à mettre en œuvre téléchargement de fichier image, comme suit C'est un cas pratique, jetons-y un coup d'œil.

Vous devriez être en mesure de citer plusieurs façons couramment utilisées pour 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. Ci-dessous, je vais partager avec vous deux manières. pour télécharger des fichiers image. Une manière : framework natif ajax et 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>

Copier après la connexion

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);
}

Copier après la connexion

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('$name')</script>";
?>

Copier après la connexion

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 = 'upload.php';
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('图片链接:n'+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>

Copier après la connexion

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);
}
?>

Copier après la connexion

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez faire attention aux autres articles connexes sur le site Web php chinois !

Lecture recommandée :

Nom d'utilisateur de vérification Ajax (image et texte détaillés)

Comment améliorer l'expérience utilisateur avec beforeSend

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!