Question

jQuery fileupload 多文件上传

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") { }
}
});

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

Answer 1

//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.'"}';  
            }  
        }  
      
    }

Answer 2

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