jQuery fileupload 多文件上传

Posted 2023-04-24

var jqXHRData = new Array();
$("#btnFileUpload").on('click', function ()
$(jqXHRData).submit();
)
$('#fileupload').fileupload(
dataType: 'json',
url: '@Url.Action("TxStoreOrderTrans001", "COMD")',
async: false,
autoUpload: false,
add: function (e, data)
jqXHRData.push(data);
,
done: function (e, data)
if (data.result.msg != "OK")

);

jqXHRData是一个数组 data如果有多个 我就放到数组中 然后提交 这样提交的话 会多次调用后台 一次只传一个文件 怎么做才能调用一次后台 把所有文件一起传到后台 也就是选几个文件 后台的Request.Files.Count就是几 我这样有4个文件 就会传4次到后台 每次都是1
var jqXHRData = new Array();
$('#fileupload').fileupload(
dataType: 'json',
url: '@Url.Action("TxStoreOrderTrans001", "COMD")',
async: false,
autoUpload: false,
add: function (e, data)
// 这个data怎么保存到file控件里？？？？
jqXHRData.push(data);
,
done: function (e, data)
if (data.result.msg != "OK")

);

第一段代码就不要看了 这个是第一段排过版的

//js
$(function () 
//文件上传地址
//var url = 'http://localhost/index.php/upload/do_upload';
var url = 'http://localhost/index.php/uploadwe';
//初始化，主要是设置上传参数，以及事件处理方法(回调函数)
$('#fileupload').fileupload(
autoUpload: true,//是否自动上传
//url: url,//上传地址
dataType: 'json',
done: function (e, data) //设置文件上传完毕事件的回调函数
//$.each(data.result.files, function (index, file) 
$("#myimg").attr(src:data.result.imgurl);
$("#myimg").css(width:"290px",height:"218px");
//alert(data.result);
,
progressall: function (e, data) //设置上传进度事件的回调函数
var progress = parseInt(data.loaded / data.total * 5, 10);
$('#progress .bar').css(
'width',
progress + '%'
);

);
); 
//上传至服务后，服务器返回json数据--上传图片的地址。
//html
<label for="text">上传图片</label>
<input id="fileupload" type="file" name="files" data-url="<span style="color:#ff6666;">jquery_save_img</span>" multiple>
//data-url为上传至服务器端的处理接口/地址，可替换js中的url
//服务器端
function jquery_save_img()  
      
        $arrType=array('image/jpg','image/gif','image/png','image/bmp','image/pjpeg','image/jpeg');  
        $max_size='500000000000';      // 最大文件限制（单位：byte）  
        $upfile='./uploads'; //图片目录路径  
        $file=$_FILES['files'];  
  
        /* 
        echo 'filename:'.$file['tmp_name'].';<br />'; 
        echo 'size:'.$file['size'].';<br />'; 
        echo 'type:'.$file['type'].';<br />'; 
        echo 'name:'.$file['name'].';<br />'; 
        */  
          
        if($_SERVER['REQUEST_METHOD']=='POST') //判断提交方式是否为POST  
            if(!is_uploaded_file($file['tmp_name'])) //判断上传文件是否存在  
                echo "<font color='#FF0000'>文件不存在！</font>";  
                exit;  
              
  
            if($file['size']>$max_size)  //判断文件大小是否大于500000字节  
                echo "<font color='#FF0000'>上传文件太大！</font>";  
                exit;  
               
            if(!in_array($file['type'],$arrType))  //判断图片文件的格式  
                echo "<font color='#FF0000'>上传文件格式不对！</font>xxx:".$file['type'];  
                exit;  
              
            if(!file_exists($upfile))  // 判断存放文件目录是否存在  
                mkdir($upfile,0777,true);  
               
            $imageSize=getimagesize($file['tmp_name']);  
            $img=$imageSize[0].'*'.$imageSize[1];  
            $fname=$file['name'];  
            $ftype=explode('.',$fname);  
            $picName=$upfile."/cloudy".$fname;  
  
            if(file_exists($picName))  
                //echo "<font color='#FF0000'>同文件名已存在！</font>";  
                //exit;  
              
            if(!move_uploaded_file($file['tmp_name'],$picName))    
                echo "<font color='#FF0000'>移动文件出错！</font>";  
                exit;  
              
            else  
            /* 
                echo "<font color='#FF0000'>图片文件上传成功！</font><br/>"; 
                echo "<font color='#0000FF'>图片大小：$img</font><br/>"; 
                echo "图片预览：<br><div style='border:#F00 1px solid; width:200px;height:200px'> 
                <img src=\\"".$picName."\\" width=200px height=200px>".$fname."</div>"; 
            */  
                echo '"imgurl":"http://localhost/uploads/cloudy'.$fname.'"';  
              
          
      
    

参考技术A 因为安全问题，是不允许js直接操作文件的。
你可以看看ajaxfileupload这个插件。 有个updateElementId 参数，传入所有要上传的<input tyle=file>的id组成的数组，就可以完成多文件上传。本回答被提问者采纳

Fileupload - 在文件加载到网络服务器之前检索文件信息

【中文标题】Fileupload - 在文件加载到网络服务器之前检索文件信息

【英文标题】：Fileupload - Retrieve File information before file loaded onto the webserver

【发布时间】：2011-02-07 22:57:16

【问题描述】：

如何在文件上传到网络服务器之前检索文件信息（文件大小）？

我想创建一个多文件上传。我让它在 JQuery 中工作，但我想知道文件的大小以通过将文件大小的总和加在一起来设置限制。

【问题讨论】：

Find file size with jQuery的可能重复

@Tim 不，你正在获取服务器上文件的文件大小，这个是在客户端请求一个

【参考方案1】：

SWFUpload 有一个提供它的文件对象，但我不知道如果你正在编写自己的多重上传，那么用你自己的代码完成它的效果如何。如果不出意外，您可以查看源代码并了解他们是如何做到的，尽管他们可能为此使用 Flash 界面。

【讨论】：

谢谢，但不想依赖 Flash 插件。

好吧，我不能 100% 确定该部分来自插件，因此可能值得花几分钟时间查看源代码。无论如何，它可能会给你一些好主意。