基于Ajaxupload的多文件上传操作

废话不多说了,直接给大家贴代码了,具体代码如下所示:

<pre name="code" class="php"><?php $ele = $_GET['ele']; $file = $_FILES['thumb_'.$ele]; $pathinfo = pathinfo($file['name']); $filedir = 'uploads/' . date('Y'); if (!is_dir($filedir)) { mkdir($filedir); } $filedir .= '/' . date('md'); if (!is_dir($filedir)) { mkdir($filedir); } $filedir .= '/' . time() . '_' . mt_rand(1000, 9999) . '.' . $pathinfo['extension']; $msg = ''; if (!move_uploaded_file($file['tmp_name'], $filedir)) { $msg = '上传失败'; } $data = array('msg' => $msg, 'filedir' => $filedir); sleep(2); echo json_encode($data); ?></pre><br> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gbk" /><title>Ajax上传</title><script src="jquery-1.4.4.min.js" type="text/javascript"></script><script src="ajaxfileupload.js" type="text/javascript"></script><script type="text/javascript">function fileupload( ele ){$("#loading").ajaxStart(function() {jQuery("#photoImg").hide();jQuery(this).show();}).ajaxComplete(function() {jQuery(this).hide();jQuery("#photoImg").show();});$.ajaxFileUpload({url: "index.php?ele="+ele,secureuri: false,fileElementId: "thumb_"+ele,dataType: "json",success: function(data, status) {if(data.msg != '') {alert(data.msg);}else {$("[name='photo_"+ele+"']").val(data.filedir);$("#photoImg_"+ele).attr("src", data.filedir);}},error: function (data, status, e) {alert(e);}})return false;}</script></head><body><!-- 第一个ajax上传 --><input type="file" id="thumb_1" name="thumb_1" onchange="return fileupload('1');" /><div><img src="ajaxLoading.gif" id="loading" style="display: none" /><img src="" id="photoImg_1" width="200px" height="150px" /><input type="text" name="photo_1" size=100/></div><hr/><!-- 第二个ajax上传 --><input type="file" id="thumb_2" name="thumb_2" onchange="return fileupload('2');" /><div><img src="ajaxLoading.gif" id="loading" style="display: none" /><img src="" id="photoImg_2" width="200px" height="150px" /><input type="text" name="photo_2" size=100 /></div><!-- 第二个ajax上传 --><input type="file" id="thumb_2" name="thumb_2" onchange="return fileupload('2');" /><div><img src="ajaxLoading.gif" id="loading" style="display: none" /><img src="" id="photoImg_2" width="200px" height="150px" /><input type="text" name="photo_2" size=100 /></div><a>添加</a></body></html> <pre></pre> <p><br> </p> <p><br> </p> <p><br> </p> <br>

总结

以上所述是小编给大家介绍的基于Ajaxupload的多文件上传操作,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

时间: 2024-08-02 15:41:37

基于Ajaxupload的多文件上传操作的相关文章

jquery插件ajaxupload实现文件上传操作_jquery

本文实例讲述了jquery插件ajaxupload实现文件上传操作代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 图1 文件上传前 图2 文件上传后 具体代码如下: 1.创建页面并编写HTML 上传文档:  <div class="uploadFile"> <span id="doc"><input type="text" disabled="disabled" /></s

Node.js开发教程之基于OnceIO框架实现文件上传和验证功能_node.js

OnceIO 是 OnceDoc 企业内容(网盘)的底层Web框架,它可以实现模板文件.静态文件的全缓存,运行起来完全不需要I/O操作,并且支持客户端缓存优化,GZIP压缩等(只在第一次压缩),拥有非常好的性能,为您节约服务器成本.它的模块化功能,可以让你的Web进行分布式存储,即一个扩展包里即包含前端.后端和数据库定义,只需通过添加/删除目录的方式就可实现功能删减,实现真正的模块化扩展.这里是介绍如何使用OnceIO的一系列文章. 在这一章节中,我们将为大家演示如何使用 OnceIO 实现文件

基于Ajax技术实现文件上传带进度条_AJAX相关

1.概述 在实际的Web应该开发或网站开发过程中,经常需要实现文件上传的功能.在文件上传过程中,经常需要用户进行长时间的等待,为了让用户及时了解上传进度,可以在上传文件的同时,显示文件的上传进度条.运行本实例,如图1所示,访问文件上传页面,单击"浏览"按钮选择要上传的文件,注意文件不能超过50MB,否则系统将给出错误提示.选择完要上传的文件后,单击"提交"按钮,将会上传文件并显示上传进度. 2.技术要点 主要是应用开源的Common-FileUpload组件来实现分

java中基于表单的文件上传例子

如果在表单中使用表单元素 <input type="file" />,浏览器在解析表单时,会自动生成一个输入框和一个按钮,输入框可供用户填写本地文件的文件名和路径名,按钮可以让浏览器打开一个文件选择框供用户选择文件: 当表单需要上传文件时,需指定表单 enctype 的值为 multipart/form-data 在 form 元素的语法中,enctype 属性指定将数据发送到服务器时浏览器使用的编码类型. enctype 属性取值: application/x-www-f

PHP文件上传操作实例详解_php技巧

本文实例分析了PHP文件上传操作.分享给大家供大家参考,具体如下: 文件上传 发生在浏览器向服务器发出的请求中. 文件,对于浏览器来讲,就是表单中的一个特殊类型的数据而已. 浏览器表单中的数据,两种类型: 字符串类型(字节流编码) 文件类型(二进制编码),文件是表单数据中一部分 服务器角度: 在接受浏览器请求时,处理好表单内的数据.根据数据类型不同使用不同处理方法: 字符串类型,存储在$_POST变量中(内存) 文件型数据,存储在上传临时目录中 表单提交时,浏览器会默认的行为: 表单内的的内容都

基于Ajax技术实现文件上传带进度条

1.概述 在实际的Web应该开发或网站开发过程中,经常需要实现文件上传的功能.在文件上传过程中,经常需要用户进行长时间的等待,为了让用户及时了解上传进度,可以在上传文件的同时,显示文件的上传进度条.运行本实例,如图1所示,访问文件上传页面,单击"浏览"按钮选择要上传的文件,注意文件不能超过50MB,否则系统将给出错误提示.选择完要上传的文件后,单击"提交"按钮,将会上传文件并显示上传进度. 2.技术要点 主要是应用开源的Common-FileUpload组件来实现分

基于jQuery 20款文件上传插件介绍

文件上传是网站很常见的功能之一,通过使用 jQuery 可以让上传过程更加人性化,更好的用户体验.本文介绍20个jQuery的文件上传插件,其中有一些是教程. 1. Plupload Plupload 是一个Web浏览器上的界面友好的文件上传模块,可显示上传进度.图像自动缩略和上传分块.可同时上传多个文件. 2. The KillersAjax Upload 该插件使用 XHR 用于上传多个文件,支持上传进度显示,但不支持 IE 3. SWFUpload jQuery Plugin 4. php

java基于Apache FTP实现文件上传、下载、修改文件名、删除_java

Apache FTP 是应用比较广泛的FTP上传客户端工具,它易于操作,代码简略,结构清晰,是做FTP文件客户端管理软件的优先之选.FTP的操作包括:FTP文件上传(断点续传).FTP文件下载.FTP文件重命名.FTP文件删除,这些操作已经将FTP应用管理的方式发挥的淋漓尽致了,So 我一直都用此种方式来实现FTP文件服务器的管理工作:下附FTP工具代码. 1.FTP文件操作状态枚举类 package com.scengine.wtms.utils.ftp; public enum FTPSta

PHP多文件上传操作

    其实多文件上传和单文件上传大同小异,原理都是一样的,只是在代码上做了点小技巧.       首先还是index.html上传表单,只是把之前上传文件表单里的file更改成了file[]   复制代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <