php ajaxfileupload实现ajax文件上传功能

可以批量进行添加上传,简单方便

 

 代码如下 复制代码

<script type="text/javascript" src="jquery-1.5.1.min.js"></script>

 

<script

    type="text/javascript" src="ajaxfileupload.js"></script>

 

<form id="upform" action="" method="post" enctype="multipart/form-data">

    <input id='fname' size='80' /><br> <input type="file" name="file1"

       id="file1" size="30" /> <input type="button" value="上传"

       onclick="return ajaxFileUpload();" /> <span id="msg"

       style="display: none">UpLoading...</span>

</form>

 

<script type="text/javascript">

var str = '';

function ajaxFileUpload(){

    $("#msg")

    .ajaxStart(function(){

       $(this).show();

    });

    /*

    .ajaxComplete(function(){

       $(this).hide();

    });

    */

    $.ajaxFileUpload(

    {

       url:'up_deal.php',

       secureuri:false,

       fileElementId:'file1',

       dataType: 'text',

       //data:{name:'qinmi', id:'123'},

       success: function(data){

              if(data=='error'){

                  $('#msg').html("<span style='color:red'>上传失败</span>");

              }else{ www.111cn.net

                  $('#msg').html("<span style='color:green'>上传成功</span>");

                  str +=  data+'@';

                  $('#fname').val(str);

              }

           }

       }

    );

    return false;

}

</script>

 up_deal.php

 代码如下 复制代码

<?php

if ((($_FILES["file1"]["type"] == "image/gif")

|| ($_FILES["file1"]["type"] == "image/jpeg")

|| ($_FILES["file1"]["type"] == "image/bmp")

|| ($_FILES["file1"]["type"] == "image/pjpeg"))

&& ($_FILES["file1"]["size"] < 100000)){//100KB

    $extend = explode(".",$_FILES["file1"]["name"]);

    $key = count($extend)-1;

    $ext = ".".$extend[$key];

    $newfile = time().$ext;

 

    if(!file_exists('upload')){mkdir('upload');}

    move_uploaded_file($_FILES["file1"]["tmp_name"],"upload/" . $newfile);

    @unlink($_FILES['file1']);

    echo $newfile;

}else {

    echo 'error';

}

?>

其中需要用到ajaxfileupload.js 这个文件,

时间: 2024-08-03 02:16:01

php ajaxfileupload实现ajax文件上传功能的相关文章

jQuery插件AjaxFileUpload实现ajax文件上传_jquery

本文实例为大家分享了AjaxFileUpload实现文件上传的具体代码,供大家参考,具体内容如下 jQuery插件AjaxFileUpload用来实现ajax文件上传,该插件使用非常简单,接下来写个demo演示怎么用AjaxFileUpload插件实现文件上传. 1.引入AjaxFileUpload插件相关的js 复制代码 代码如下: <script type="text/javascript" src="<%=basePath%>resources/js/

php ajax 文件上传实现代码(1/2)

一款完整ajax 文件上传功能,我们利用了jquery ajax上传插件来实现的,下面代码非常完整. <html> <head> <style> body{font-size:12px; bgcolor:menu;} table{font-size:12px;} </style> <title></title> <meta http-equiv="content-stype" content="te

jQuery插件AjaxFileUpload文件上传实现Javascript多文件上传功能

Ajax file upload plugin是一个功能强大的文件上传jQuery插件,可自定义链接.或其它元素庖代传统的file表单上传结果,可实现Ajax动态提示文件上传 过程,同时支撑多文件上传,AjaxFileUpload文件上传插件功能斗劲稳定,今朝应用也斗劲多,简单应用实例如下: 查看AjaxFileUpload相干jQuery官方文档介绍 AjaxFileUpload JS库文件 查看AjaxFileUpload演示 一,创建一个ajax upload按钮元素(button),

AjaxFileUpload+Struts2实现多文件上传功能

本文重点给大家介绍AjaxFileUpload+Struts2实现多文件上传功能,具体实现代码大家参考下本文. 单文件和多文件的实现区别主要修改两点, 一是插件ajaxfileupload.js里接收file文件ID的方式 二是后台action是数组形式接收 1.ajaxFileUpload文件下载地址http://www.phpletter.com/Demo/AjaxFileUpload-Demo/ 2.引入jquery-1.8.0.min.js.ajaxFileUpload.js文件 3.文

Ajax 配合node js multer 实现文件上传功能

说明 作为一个node 初学者,最近在做一个聊天软件,支持注册.登录.在线单人.多人聊天.表情发送.各种文件上传下载.增删好友.聊天记录保存.通知声开关.背景图片切换.游戏等功能,所以用到了multer 模块,经过各种查文档,做demo例子,终于成功实现单个文件上传功能,支持大部分文件格式上传,同时显示到网页上 效果 是不是有种微信即视感,没错,就是根据网页版微信来做的, 要实现整体效果的话,要配合css和html来做,前端初学者,第一次发博客,实在捉急,近期,将会将代码放到github上去,感

MVC中基于Ajax和HTML5实现文件上传功能_AJAX相关

引言 在实际编程中,经常遇到实现文件上传并显示上传进度的功能,基于此目的,本文就为大家介绍不使用flash 或任何上传文件的插件来实现带有进度显示的文件上传功能. 基本功能:实现带有进度条的文件上传功能 高级功能:通过拖拽文件的操作实现多个文件上传功能 背景 HTML5提供了一种标准的访问本地文件的方法--File API规格说明,通过调用File API 能够访问文件信息,也可以利用客户端来验证上传文件的类型和大小是否规范. 该规格说明包含以下几个接口来使用文件: File接口:具有文件的"读

深入浅析AjaxFileUpload实现单个文件的 Ajax 文件上传库_AJAX相关

jQuery.AjaxFileUpload.js是一款jQuery插件,用于通过ajax上传文件. 语法: $.ajaxFileUpload([options]) options参数说明: 1.url 上传处理程序地址. 2,fileElementId 需要上传的文件域的ID,即<input type="file">的ID. 3,secureuri 是否启用安全提交,默认为false. 4,dataType 服务器返回的数据类型.可以为xml,script,json,htm

MVC中基于Ajax和HTML5实现文件上传功能

引言 在实际编程中,经常遇到实现文件上传并显示上传进度的功能,基于此目的,本文就为大家介绍不使用flash 或任何上传文件的插件来实现带有进度显示的文件上传功能. 基本功能:实现带有进度条的文件上传功能 高级功能:通过拖拽文件的操作实现多个文件上传功能 背景 HTML5提供了一种标准的访问本地文件的方法--File API规格说明,通过调用File API 能够访问文件信息,也可以利用客户端来验证上传文件的类型和大小是否规范. 该规格说明包含以下几个接口来使用文件: File接口:具有文件的"读

MVC5:使用Ajax和HTML5实现文件上传功能

引言 在实际编程中,经常遇到实现文件上传并显示上传进度的功能,基于此目的,本文就为大家介绍不使用flash 或任何上传文件的插件来实现带有进度显示的文件上传功能. 基本功能:实现带有进度条的文件上传功能 高级功能:通过拖拽文件的操作实现多个文件上传功能 背景 HTML5提供了一种标准的访问本地文件的方法--File API规格说明,通过调用File API 能够访问文件信息,也可以利用客户端来验证上传文件的类型和大小是否规范. 该规格说明包含以下几个接口来使用文件: File接口:具有文件的"读