当前位置: 首页 > 编程笔记 >

原生ajax和iframe框架实现图片文件上传的两种方式

戚森
2023-03-14
本文向大家介绍原生ajax和iframe框架实现图片文件上传的两种方式,包括了原生ajax和iframe框架实现图片文件上传的两种方式的使用技巧和注意事项,需要的朋友参考一下

大家应该可以举出几种常用的异步文件上传功能的实现方式,使用频率较多的有原生ajax和iframe框架,实现图片文件上传,下面就为大家分享图片文件上传的两种方式:原生ajax和iframe框架,供大家参考,具体内容如下

方法一:利用iframe框架上传图片

html代码如下:

<div 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>
</div>
<div id="msg">
</div>

index.js文件:

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

upload.php文件:

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

方法二:原生态ajax文件上传

<!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>
<div class="form-group">
<label class="control-label">图片</label>
<br/>
<input type='text' name='textfield' id='textfield' class='txt' />
<span onclick="file.click()" class="mybtn">浏览...</span>
<input type="file" name="file" class="file" id="file" size="28" onchange="document.getElementById('textfield').value=this.value" />
<span onclick="UpladFile()" class="mybtn">上传</span>
</div>
</body>
</html>

php代码:

<?php
if(isset($_FILES["myfile"]))
{
$ret = array();
$uploadDir = 'images'.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().'.'.pathinfo($_FILES["myfile"]["name"])['extension'];
move_uploaded_file($_FILES["myfile"]["tmp_name"],$dir.$fileName);
$ret['file'] = DIRECTORY_SEPARATOR.$uploadDir.$fileName;
}
echo json_encode($ret);
}
?>

以上就是本文的全部内容,希望对大家学习理解ajax和iframe框架实现图片文件上传有所帮助。

 类似资料:
  • 本文向大家介绍详解Ajax和form+iframe 实现文件上传的方法(两种方式),包括了详解Ajax和form+iframe 实现文件上传的方法(两种方式)的使用技巧和注意事项,需要的朋友参考一下 自从有html5之后,文件上传变的非常简单。很方便的解决了项目中需要用到的文件上传功能。HTML5支持多图片上传,而且支持ajax上传,而且支持上传之前图片的预览,而且支持图片拖拽上传,而且还是纯粹利

  • 本文向大家介绍Yii框架实现图片上传的方法详解,包括了Yii框架实现图片上传的方法详解的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了Yii框架实现图片上传的方法。分享给大家供大家参考,具体如下: 今天在网上看了下有关图片上传的教程,历经挫折才调试好,现在把相关代码及其说明贴出来,以供初次使用的朋友们参考。 Model: 注:resource为数据表,表前缀可在main.php内设置,相信

  • 本文向大家介绍php文件上传的两种实现方法,包括了php文件上传的两种实现方法的使用技巧和注意事项,需要的朋友参考一下 文件上传一般有下面2种方式: 有两种: 1、标准input表单方式,典型的用$_FILES进行接收; 2、以Base64的方式进行传送,一般是AJAX异步上传。 第一种 标准的input表单方式,适用于大文件进行上传,同时支持批量。html代码关键的几句: 不同的name时: 其

  • 本文向大家介绍SpringMVC框架实现图片上传与下载,包括了SpringMVC框架实现图片上传与下载的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了SpringMVC框架实现图片上传与下载的具体代码,供大家参考,具体内容如下 1、新建一个Maven webapp项目,引入需要用的夹包,pom.xml文件的依赖包如下: 2、配置文件设置如下: (1) web.xml内容为: (2)s

  • 本文向大家介绍php+ajax实现图片文件上传功能实例,包括了php+ajax实现图片文件上传功能实例的使用技巧和注意事项,需要的朋友参考一下 目前常用的异步文件上传功能有几种,比较多见的如使用iframe框架形式,ajax功能效果,以及flash+php功能,下面介绍ajax与iframe实现异步文件上传的功能的例子。 方法一,利用jquery ajaxfileupload.js实现文件上传 其

  • 本文向大家介绍Yii+upload实现AJAX上传图片的方法,包括了Yii+upload实现AJAX上传图片的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了Yii+upload实现AJAX上传图片的方法。分享给大家供大家参考,具体如下: 控制器代码: VIEW代码: 更多关于Yii相关内容感兴趣的读者可查看本站专题:《Yii框架入门及常用技巧总结》、《php优秀开发框架总结》、《sm