jquery 多个 上传文件教程

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery 多个 上传文件教程相关的知识，希望对你有一定的参考价值。

RT 谁那有例子 先浏览添加了文件的路径之后，点附件上传 把信息保存在页面之后，点提交再上传的 jquery 例子啊？

jquery 实现多个上传文件教程：

首先创建解决方案,添加jquery的js和一些资源文件(如图片和进度条显示等):

 jquery-1.3.2.min.js
 jquery.uploadify.v2.1.0.js
  jquery.uploadify.v2.1.0.min.js
  swfobject.js
 uploadify.css

1、页面的基本代码如下

这里用的是aspx页面(html也是也可的)

页面中引入的js和js函数如下：

<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>  
<script src="js/jquery.uploadify.v2.1.0.js" type="text/javascript"></script>  
<script src="js/jquery.uploadify.v2.1.0.min.js" type="text/javascript"></script>  
<script src="js/swfobject.js" type="text/javascript"></script>  
<link href="css/uploadify.css" rel="stylesheet" type="text/css" />  
  
</script>

js函数：

<script type="text/javascript">  
        $(document).ready(function ()   
   
            $("#uploadify").uploadify(  
                \'uploader\': \'image/uploadify.swf\',  //uploadify.swf文件的相对路径，该swf文件是一个带有文字BROWSE的按钮，点击后淡出打开文件对话框                
             \'script\': \'Handler1.ashx\',//    script ：  后台处理程序的相对路径  
                \'cancelImg\': \'image/cancel.png\',  
                \'buttenText\': \'请选择文件\',//浏览按钮的文本，默认值：BROWSE。  
                \'sizeLimit\':999999999,//文件大小显示  
                \'floder\': \'Uploader\',//上传文件存放的目录  
              \'queueID\': \'fileQueue\',//文件队列的ID，该ID与存放文件队列的div的ID一致  
                \'queueSizeLimit\': 120,//上传文件个数限制  
                \'progressData\': \'speed\',//上传速度显示  
                \'auto\': false,//是否自动上传  
                \'multi\': true,//是否多文件上传  
                //\'onSelect\': function (e, queueId, fileObj)   
                //    alert("唯一标识:" + queueId + "\\r\\n" +  
                //  "文件名：" + fileObj.name + "\\r\\n" +  
                //  "文件大小：" + fileObj.size + "\\r\\n" +  
                //  "创建时间：" + fileObj.creationDate + "\\r\\n" +  
                //  "最后修改时间：" + fileObj.modificationDate + "\\r\\n" +  
                //  "文件类型：" + fileObj.type);  
   
                //      
                \'onQueueComplete\': function (queueData)   
                    alert("文件上传成功！");                    
                    return;  
                  
   
            );  
        );

页面中的控件代码：

<body>  
    <form id="form1" runat="server">  
    <div id="fileQueue">         
    </div>  
        <div>  
            <p>  
                <input type="file" name="uploadify" id="uploadify"/>  
                <input id="Button1" type="button" value="上传" onclick="javascript: $(\'#uploadify\').uploadifyUpload()" />  
                <input id="Button2" type="button" value="取消" onclick="javascript:$(\'#uploadify\').uploadifyClearQueue()" />  
            </p>  
        </div>  
    </form>  
</body>

函数主要参数：

$(document).ready(function()   
        $(\'#fileInput1\').fileUpload(  
                \'uploader\': \'uploader.swf\',//不多讲了  
                \'script\': \'/AjaxByJQuery/file.do\',//处理Action  
                \'cancelImg\': \'cancel.png\',          
                \'folder\': \'\',//服务端默认保存路径  
                \'scriptData\':\'methed\':\'uploadFile\',\'arg1\',\'value1\',  
                //向后台传递参数,methed,arg1为参数名,uploadFile,value1为对应的参数值,服务端通过request["arg1"]  
                \'buttonText\':\'UpLoadFile\',//按钮显示文字,不支持中文,解决方案见下  
                //\'buttonImg\':\'图片路径\',//通过设置背景图片解决中文问题,就是把背景图做成按钮的样子  
                \'multi\':\'true\',//多文件上传开关  
                 \'fileExt\':\'*.xls;*.csv\',//文件过滤器  
                \'fileDesc\':\'.xls\',//文件过滤器 详解见文档  
           \'onComplete\' : function(event,queueID,file,serverData,data)   
                        //serverData为服务器端返回的字符串值  
                        alert(serverData);  
                   
        );  
);

后台一般处理文件：

using System;  
using System.Collections.Generic;  
using System.Linq;  
using System.IO;  
using System.Net;  
using System.Web;  
using System.Web.Services;  
namespace fupload  
  
    /// <summary>  
    /// Handler1 的摘要说明  
    /// </summary>  
    public class Handler1 : IHttpHandler  
      
   
        public void ProcessRequest(HttpContext context)  
          
            context.Response.ContentType = "text/plain";  
   
            HttpPostedFile file = context.Request.Files["Filedata"];//对客户端文件的访问  
   
            string uploadPath = HttpContext.Current.Server.MapPath(@context.Request["folder"])+"\\\\";//服务器端文件保存路径  
   
            if (file != null)  
              
                if (!Directory.Exists(uploadPath))  
                  
                    Directory.CreateDirectory(uploadPath);//创建服务端文件夹  
                  
   
                file.SaveAs(uploadPath + file.FileName);//保存文件  
                context.Response.Write("上传成功");  
              
   
            else  
              
                context.Response.Write("0");  
              
   
          
   
        public bool IsReusable  
          
            get  
              
                return false;  
              
          
      

以上方式基本可以实现多文件的上传，大文件大小是在控制在10M以下/。

 参考技术A 这里有一个无刷新多文件上传系统
里面可以判断文件多少 文件类型
里面有教程和源码

参考资料：http://www.blueidea.com/common/shoutbox/redir.asp?8=n&id=11280

如何使用 PHP、jQuery 和 AJAX 上传多个文件

【中文标题】如何使用 PHP、jQuery 和 AJAX 上传多个文件【英文标题】：How to upload multiple files using PHP, jQuery and AJAX 【发布时间】：2013-10-18 05:05:12 【问题描述】：

我设计了一个简单的表单，允许用户将文件上传到服务器。最初，表单包含一个“浏览”按钮。如果用户想要上传多个文件，他需要点击“添加更多文件”按钮，该按钮会在表单中添加另一个“浏览”按钮。提交表单时，文件上传过程在“upload.php”文件中处理。它非常适合上传多个文件。现在我需要使用 jQuery 的 '.submit()' 提交表单并向 'upload.php' 文件发送一个 ajax ['.ajax()'] 请求来处理文件上传。

这是我的 HTML 表单：

<form enctype="multipart/form-data" action="upload.php" method="post">
    <input name="file[]" type="file" />
    <button class="add_more">Add More Files</button>
    <input type="button" id="upload" value="Upload File" />
</form>

这里是 JavaScript：

$(document).ready(function()
    $('.add_more').click(function(e)
        e.preventDefault();
        $(this).before("<input name='file[]' type='file' />");
    );
);

这是处理文件上传的代码：

for($i=0; $i<count($_FILES['file']['name']); $i++)
$target_path = "uploads/";
$ext = explode('.', basename( $_FILES['file']['name'][$i]));
$target_path = $target_path . md5(uniqid()) . "." . $ext[count($ext)-1]; 

if(move_uploaded_file($_FILES['file']['tmp_name'][$i], $target_path)) 
    echo "The file has been uploaded successfully <br />";
 else
    echo "There was an error uploading the file, please try again! <br />";

任何关于我应该如何编写我的 '.submit()' 函数的建议都会很有帮助。

【问题讨论】：

我认为你应该使用这些过程之一，要么你可以提交，要么你可以通过 ajax 上传。你想要什么不清楚 ***.com/questions/166221/… 类似问题和可能的解决方案。 无论是提交还是上传，任何事情都对我有用。但文件上传是首要任务。 【参考方案1】：

最后我通过以下代码找到了解决方案：

$('body').on('click', '#upload', function(e)
        e.preventDefault();
        var formData = new FormData($(this).parents('form')[0]);

        $.ajax(
            url: 'upload.php',
            type: 'POST',
            xhr: function() 
                var myXhr = $.ajaxSettings.xhr();
                return myXhr;
            ,
            success: function (data) 
                alert("Data Uploaded: "+data);
            ,
            data: formData,
            cache: false,
            contentType: false,
            processData: false
        );
        return false;
);

【讨论】：

你为什么不接受 Kalai 的回答，因为它几乎涵盖了你需要的一切 Kalai 的回答产生了多个错误。这就是我不接受的原因。但当他试图提供帮助时，我很高兴也很感激他。 不错且简单的解决方案，尽管在您上面发布的代码中您错过了一个 ;最后.. 如何在 php 中获取浏览过的文件（formData）？ @V.P 可以使用超全局变量 $_FILES 访问 PHP 中提交的文件相关数据。【参考方案2】：

HTML

<form enctype="multipart/form-data" action="upload.php" method="post">
    <input name="file[]" type="file" />
    <button class="add_more">Add More Files</button>
    <input type="button" value="Upload File" id="upload"/>
</form>

Javascript

 $(document).ready(function()
    $('.add_more').click(function(e)
        e.preventDefault();
        $(this).before("<input name='file[]' type='file'/>");
    );
);

用于ajax上传

$('#upload').click(function() 
    var filedata = document.getElementsByName("file"),
            formdata = false;
    if (window.FormData) 
        formdata = new FormData();
    
    var i = 0, len = filedata.files.length, img, reader, file;

    for (; i < len; i++) 
        file = filedata.files[i];

        if (window.FileReader) 
            reader = new FileReader();
            reader.onloadend = function(e) 
                showUploadedItem(e.target.result, file.fileName);
            ;
            reader.readAsDataURL(file);
        
        if (formdata) 
            formdata.append("file", file);
        
    
    if (formdata) 
        $.ajax(
            url: "/path to upload/",
            type: "POST",
            data: formdata,
            processData: false,
            contentType: false,
            success: function(res) 

            ,       
            error: function(res) 

                    
             );
            
        );

PHP

for($i=0; $i<count($_FILES['file']['name']); $i++)
    $target_path = "uploads/";
    $ext = explode('.', basename( $_FILES['file']['name'][$i]));
    $target_path = $target_path . md5(uniqid()) . "." . $ext[count($ext)-1]; 

    if(move_uploaded_file($_FILES['file']['tmp_name'][$i], $target_path)) 
        echo "The file has been uploaded successfully <br />";
     else
        echo "There was an error uploading the file, please try again! <br />";
    


/** 
    Edit: $target_path variable need to be reinitialized and should 
    be inside for loop to avoid appending previous file name to new one. 
*/

请使用上面的脚本进行 ajax 上传。它会工作

【讨论】：

它显示“TypeError: document.getElementByName is not a function” for var filedata = document.getElementByName("file") 仍然显示“TypeError: filedata.files is undefined” for "var i = 0, len = filedata.files.length, img, reader, file;" @Kalai：它显示此错误“未定义 showUploadedItem”。我应该怎么做才能解决它？ 它仍在重新加载我的页面 @kalai 它显示错误“filedata.files is undefined” for var "filedata = document.getElementsByName("file");"【参考方案3】：

我的解决方案

假设表单 id = "my_form_id" 它从 HTML 中检测表单 method 和表单 action

jQuery 代码

$('#my_form_id').on('submit', function(e) 
    e.preventDefault();
    var formData = new FormData($(this)[0]);
    var msg_error = 'An error has occured. Please try again later.';
    var msg_timeout = 'The server is not responding';
    var message = '';
    var form = $('#my_form_id');
    $.ajax(
        data: formData,
        async: false,
        cache: false,
        processData: false,
        contentType: false,
        url: form.attr('action'),
        type: form.attr('method'),
        error: function(xhr, status, error) 
            if (status==="timeout") 
                alert(msg_timeout);
             else 
                alert(msg_error);
            
        ,
        success: function(response) 
            alert(response);
        ,
        timeout: 7000
    );
);

【讨论】：

【参考方案4】：

使用此源代码，您可以像 google 一样上传多个文件 一个通过ajax。还可以看到上传进度

HTML

 <input type="file" id="multiupload" name="uploadFiledd[]" multiple >
 <button type="button" id="upcvr" class="btn btn-primary">Start Upload</button>
 <div id="uploadsts"></div>

Javascript

    <script>

    function uploadajax(ttl,cl)

    var fileList = $('#multiupload').prop("files");
    $('#prog'+cl).removeClass('loading-prep').addClass('upload-image');

    var form_data =  "";

    form_data = new FormData();
    form_data.append("upload_image", fileList[cl]);


    var request = $.ajax(
              url: "upload.php",
              cache: false,
              contentType: false,
              processData: false,
              async: true,
              data: form_data,
              type: 'POST', 
              xhr: function()   
                  var xhr = $.ajaxSettings.xhr();
                  if(xhr.upload) 
                  xhr.upload.addEventListener('progress', function(event)
                      var percent = 0;
                      if (event.lengthComputable) 
                          percent = Math.ceil(event.loaded / event.total * 100);
                      
                      $('#prog'+cl).text(percent+'%') 
                   , false);
                 
                 return xhr;
              ,
              success: function (res, status) 
                  if (status == 'success') 
                      percent = 0;
                      $('#prog' + cl).text('');
                      $('#prog' + cl).text('--Success: ');
                      if (cl < ttl) 
                          uploadajax(ttl, cl + 1);
                       else 
                          alert('Done');
                      
                  
              ,
              fail: function (res) 
                  alert('Failed');
                  
          )
    

    $('#upcvr').click(function()
        var fileList = $('#multiupload').prop("files");
        $('#uploadsts').html('');
        var i;
        for ( i = 0; i < fileList.length; i++) 
            $('#uploadsts').append('<p class="upload-page">'+fileList[i].name+'<span class="loading-prep" id="prog'+i+'"></span></p>');
            if(i == fileList.length-1)
                uploadajax(fileList.length-1,0);
            
         
    );
    </script>

PHP

upload.php
    move_uploaded_file($_FILES["upload_image"]["tmp_name"],$_FILES["upload_image"]["name"]);

【讨论】：

您可以像谷歌上传一样使用jquery ajax 和php 上传图片/文件。该文件将一个接一个地上传。并非全部在一个请求中...... 我试了之后什么也没做，是不是javascript有错误？

以上是关于jquery 多个 上传文件教程的主要内容，如果未能解决你的问题，请参考以下文章

如何使用 PHP、jQuery 和 AJAX 上传多个文件

从 jQuery 中选择多个文件后，ASP.Net 上传多个文件

html 如何使用jQuery上传多个文件上传表单数据

input file多个文件上传基本教程

input file多个文件上传基本教程

如何获取附加了 Jquery Multifield 插件的多个下拉列表和文件上传的值