php+ajax上传文件(对各平台浏览器支持很好)

最新推荐文章于 2023-10-09 10:58:30 发布
最新推荐文章于 2023-10-09 10:58:30 发布
阅读量1k 收藏 1
点赞数
分类专栏： 上传文件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/luckymama/article/details/53389488
版权

下载demo网址：http://www.uploadify.com/demos/

1、编写index.html

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php+ajax上传文件</title>
<script src="jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="jquery.uploadify.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="uploadify.css">
<style type="text/css">
body {
	font: 13px Arial, Helvetica, Sans-serif;
}
</style>
</head>

<body>
	<form>
		<div id="queue"></div>
		<em>*</em> 上传文件：
        <input id="file_upload" name="file_upload" type="file" multiple="true">
        <input type="hidden" name="file_upload_value" id="file_upload_value" value="" />
        <div id="uploadify_excel_list"></div>
	</form>

	<script type="text/javascript">
		var uploadify = {
          	'formData'     : {
              	'plateform' : 0,
          	},
          	'swf'             : 'uploadify.swf',
          	'uploader'        : 'uploadify.php',
          	'buttonText'      : '立即上传',
          	'width'           : 80,
          	'height'          : 28,
          	'auto'            : true,
          	'multi'           : false,
          	'removeCompleted' : false,
          	'fileSizeLimit'   : '1MB',
          	'overrideEvents'  : ['onSelectError','onUploadError','onUploadSuccess','onDialogClose'],
          	'onUploadSuccess':function(file, data, response) {},
          	'onSelectError':function(file, errorCode, errorMsg){
              	switch(errorCode) {
                  	case -110:
                      	alert("文件 ["+file.name+"] 大小超出系统限制");
                      	break;
                  	case -120:
                      	alert("文件 ["+file.name+"] 大小异常！");
                      	break;
                  	case -130:
                      	alert("文件 ["+file.name+"] 类型不正确！");
                      	break;
              	}
             	return false;
         	},
          'onUploadError' : function(file, errorCode, errorMsg, errorString) {
                  alert('上传失败');
              },
      	}
      	uploadify.fileSizeLimit = '1024KB';
      	uploadify.onUploadSuccess = function(file, data, response){
         	$('.uploadify-queue-item').hide();
          	var d = $.parseJSON(data);
          	if(d.code==0){
          		//d.data.file上传文件的地址，便于处理
          		$('#file_upload_value').val(d.file);
          		//增加删除按钮
              	$('#uploadify_excel_list').html('<span>'+d.file+'</span> <a href="javascript:$(\'#file_upload_value\').val(\'\');$(\'#uploadify_excel_list\').html(\'\')">删除</a>');
          		//逻辑代码处理
          	}else{
              alert(d.message);
          	}
        };

		$('#file_upload').uploadify(uploadify);
	</script>
</body>
</html>

2、编写uploadify.php

<?php
$targetFolder = '/uploadify/uploads'; // Relative to the root

if (!empty($_FILES)) {
	$tempFile = $_FILES['Filedata']['tmp_name'];
	$targetPath = $_SERVER['DOCUMENT_ROOT'] . $targetFolder;
	$targetFile = rtrim($targetPath,'/') . '/' . $_FILES['Filedata']['name'];
	
	// Validate the file type
	$fileTypes = array('jpg','jpeg','gif','png'); // File extensions
	$fileParts = pathinfo($_FILES['Filedata']['name']);
	
	if (in_array($fileParts['extension'],$fileTypes)) {
		move_uploaded_file($tempFile,$targetFile);
		$data['file'] = $targetFile;
		$data['code'] = 0;
		$data['message'] = '上传成功';
		echo json_encode($data);die;
	} else {
		$data['code'] = 1;
		$data['message'] = '上传失败';
		echo json_encode($data);die;
	}
}
?>

3、编写uploadify.css 

.uploadify {
	position: relative;
	margin-bottom: 1em;
	display: inline-block;
}
.uploadify-button {
	background-color: #D6D6D6;
	background-image: linear-gradient(bottom, #D6D6D6 0%, #eee 100%);
	background-image: -o-linear-gradient(bottom, #D6D6D6 0%, #eee 100%);
	background-image: -moz-linear-gradient(bottom, #D6D6D6 0%, #eee 100%);
	background-image: -webkit-linear-gradient(bottom, #D6D6D6 0%, #eee 100%);
	background-image: -ms-linear-gradient(bottom, #D6D6D6 0%, #eee 100%);
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0, #D6D6D6),
		color-stop(1, #eee)
	);
	background-position: center top;
	background-repeat: no-repeat;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;
	border: 2px solid #808080;
	color: #FFF;
	font: bold 12px Arial, Helvetica, sans-serif;
	text-align: center;
	text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
	width: 100%;
	    /*background: #D6D6D6;*/
    color: #666666;
    border-radius: 3px;
    line-height: 34px;
    width: 90px;
    border: none;
    height: 34px;
    font-size: 14px;
}
.uploadify:hover .uploadify-button {
	background-color: #eee;
	background-image: linear-gradient(top, #eee 0%, #D6D6D6 100%);
	background-image: -o-linear-gradient(top, #eee 0%, #D6D6D6 100%);
	background-image: -moz-linear-gradient(top, #eee 0%, #D6D6D6 100%);
	background-image: -webkit-linear-gradient(top, #eee 0%, #D6D6D6 100%);
	background-image: -ms-linear-gradient(top, #eee 0%, #D6D6D6 100%);
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0, #eee),
		color-stop(1, #D6D6D6)
	);
	background-position: center bottom;
}
.uploadify-button.disabled {
	background-color: #D0D0D0;
	color: #808080;
}
.uploadify-queue {
	/*margin-bottom: 1em;*/
}
.uploadify-queue-item {
	background-color: #F5F5F5;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	font: 11px Verdana, Geneva, sans-serif;
	margin-top: 5px;
	max-width: 350px;
	padding: 10px;
}
.uploadify-error {
	background-color: #FDE5DD !important;
}
.uploadify-queue-item .cancel a {
	background: url('../images/uploadify-cancel.png') 0 0 no-repeat;
	float: right;
	height:	16px;
	text-indent: -9999px;
	width: 16px;
}
.uploadify-queue-item.completed {
	background-color: #E5E5E5;
}
.uploadify-progress {
	background-color: #E5E5E5;
	margin-top: 10px;
	width: 100%;
}
.uploadify-progress-bar {
	background-color: #0099FF;
	height: 3px;
	width: 1px;
}

4、上传成功




爱代码也爱家庭
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
php+mysql+ajax开发的母亲节祝福程序
03-24
安装前需要创建好一个数据库后，将wish文件夹传到相应，通过浏览器直接访问wish文件夹下的install.php，根据提示进行安装，很简单，不过安装前必须保证config.php文件可写。 初时管理帐号为：admin wishadmin 可以在...
分享97个上传下载PHP源码，总有一款适合你
zy0412326的专栏
12-19 7074
PHP上传下载源码 分享97个上传下载PHP源码，总有一款适合你 链接：https://pan.baidu.com/s/1iq7G7usWs3yd05bwCChgLg 提取码：1t7l 下面是文件的名字，我放了一些图片，文章里不是所有的图主要是放不下...，大家下载后可以看到。 商擎MALL设计素材下载系统(含小程序) v1.1 build20211125 魔众轻量级文库系统 v2.0.0 php单文件实现ajax多文件上传带进度条 v20211024 YYC松鼠短视频系统源码 V4.2.5 开源版 .
PHP+AJAX实现异步上传文件
wuxiaopengnihao1的博客
08-24 1135
本文章向大家介绍PHP用ajax请求的形式上传文件，文章主要包括HTML表单的创建、AJAX脚本的编写以及服务器端PHP脚本。具体类容请阅读文章正文。
php+html+js+ajax实现文件上传
最新发布
php-yyds
10-09 1391
php+html+js+ajax实现文件上传。
PHP实现文件上传和下载超完整实例源码(详解)
David_Run的博客
04-21 2462
1.效果图2.首先是封装好的图片类（缩放及生成水印）（1）GDBasic.php （2）Image.php​​​​​​ style样式不是重点，先不放了3.然后是ajax类封装的文件 ajax.js​​​​​​​ （1）首页文件index.php​​​​​​​ （2）图片相关功能处理 upload_class.php​​​​​​​ （3）封装好的文件上传类 UploadFile.php （4）搜索功能实现 search.php​​​​​​​ 4.最后数据库格式 ​​​​​​​..
php+ajax大文件分片上传示例代码
winkexin的博客
06-03 258
前端把file文件对象按一定的大小分割成一定大小的文件（如按2M或5M来分割），对分割后的文件，一个个的上传到后端去，后端接收到分片文件后,把它们先放到一个临时的目录下，在收到前端完成的数据请求的时候,把临时目录中的文件组装起来成一个新的文件，保存后，把临时目录下的文件删除掉就可以了。上面的方法，我本地测试上传了一个 650M的文件，只用的 20秒的时间，没有在服务器上测试过，大家可以按照这个方法试一下。的方法，而不是form的submit的方式。PHP在上传超大的文件时，不能只让后端。
AJAX-Chat：使用JavaScript，PHP和MySQL实现的完全可自定义的网络聊天，可与phpBB，MyBB，FluxBB，SMF和vBulletin等常见论坛系统很好地集成。 可以使用基于Flash和Ruby的套接字连接来提高性能
02-20
AJAX聊天客户端（用户浏览器）使用JavaScript查询Web服务器的更新。 而不是提供完整HTML页面，仅以XML格式发送更新的数据。 通过使用JavaScript，可以更新聊天页面，而不必重新加载整个页面。要求服务器端客户端PHP...
Ajax PHP分页演示
12-17
今天看默默讲解分页，想想好像原创区很久没人发帖了，就顺便把默默的那个扩展开来，来个PHP+AJAX分页演示吧，好的，说来就来，首先我们依然是基本的AJAX开发框架： 复制代码 代码如下:var http_request=false;...
PHP培训教程之AJAX技术.docx
12-25
使用AJAX可以创建更好，更快，更用户界面友好的Web应用。 AJAX技术基于Javascript和HTTPRequest. Ajax包含下列技术： 基于web标准（standards-basedpresentation）XHTML+CSS的表示； 使用DOM（DocumentObjectModel...
Ajax与PHP基础教程
05-19
因特网技术的发展一直非常迅速.虽然最早出现的时候显示的是文本信息(因为那时存储...虽然从理论上讲,这种方式可能工作得很好,但是 开发人员开始寻求更简易的方法,以使Web应用程序的响应时间更短.说明php中应用ajax技术
PHP的AJAX技术实现文件异步上传
04-05
异步的文件上传是在现代的AJAX实现的Web应用里面经常要遇到，必须解决的问题。但是标准的AJAX类（XmlHttpRequest）无法实现传输 文件的功能。因此，这里讨论的内容就是如何在AJAX的技术的基础之上构建异步的文件上传功能。在这个功能当中需要使用到内置的框及（IFRAME）来传 输文件。这个功能实现的效果是页面在上传文件的时候，用户还可以使用该页面并且填写文件描述。
PHP ajax上传文件
08-24
PHP 通过ajax 上传文件的方法，非常好用，并局部刷新上传文件信息
PHP中 使用ajax 实现文件上传
xcguoyu2916的博客
05-21 1581
1. ajax技术 上传时 要使用 :  new  formData ;首先看一下formData的基本用法：FormData对象，可以把所有表单元素的name与value组成一个queryString，提交到后台。只需要把 form 表单作为参数传入 FormData 构造函数即可：然后使用 append() 方法向该对象里添加字段（字段的值可以是一个 Blob 对象，File对象或者字符串，剩...
用ajax+php实现前端页面上的文件（图片）、内容上传至数据库
TGA麻辣香锅的博客
01-19 1103
1.首先是前端的页面 这里放了主要的form表单内容 <form id="form"> <input name="names" type="text" placeholder="你的名字"> <input name="college" type="text" placeholder="你的学院"> <input name="home" type="text" placeholder="你的家乡">
php 用ajax上传实现异步上传文件
欢迎来到我的博客
04-25 1163
文章主要为大家详细介绍了php+ajax实现异步上传文件或图片功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下 本文为大家分享了ajax异步上传文件或图片功能的具体代码，供大家参考，具体内容如下 html代码 ​ <form action="" method="post" enctype="multipart/form-data" id="uploadForm"> <table class="tb"> <tr> <i
php ajax上传视频
nzz_1214
01-18 609
效果如下： php代码： public function upload(){ $file = $this->my_get_file($_FILES); if($file){ $this ->ajaxReturn(['status'=>200,'msg'=>"成功",'data'=>$file]); ...
php发送ajax提交的视频,ajax 上传视频文件
weixin_29337309的博客
03-10 262
html>ImageUploadFormfunctionsubmitForm(){console.log("submitevent");varfd=newFormData(document.getElementById("fileinfo"));fd.append("label","WEBUPLOAD");$.ajax({url:"upload_file.php",ty...
php+jquery+ajax异步批量上传图片文件，并显示进度条
wei042的博客
03-06 1164
ajax异步批量上传文件，或者图片，上传过程中显示进度条，上传完成后进行预览
php+ajax实现图片文件上传功能实例
aisao7105的博客
07-28 341
目前常用的异步文件上传功能有几种，比较多见的如使用iframe框架形式，ajax功能效果，以及flash+php功能，下面介绍ajax与iframe实现异步文件上传的功能的例子。 方法一，利用jquery ajaxfileupload.js实现文件上传 其实就是实现无刷新式的文件上传。可采用IFRAME文件上传原理。实际上在用PHP上传文件时。。。只能用$_FILES形式，但是若我们...
php ajax 上传文件
06-22
PHP AJAX上传文件是一种非常流行的技术，可以轻松地实现文件上传功能。AJAX可以将文件上传过程分解为几个步骤，然后每一步都可以单独进行处理，使得上传更为方便快捷。 上传文件的过程包括文件的选择、上传过程和...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值