您的位置：首页 > 其它

ajaxfileupload多文件上传

2015-11-30 03:06 369 查看

ajaxfileupload多文件上传

转载请注明出处，不过应该没人转吧

话不多说直接上代码

//ajaxfileupload.js
//原版
//var oldElement;
//if(fileElement == null)
//  oldElement = jQuery('#' + fileElementId);
//else
//  oldElement = fileElement;
//
//var newElement = jQuery(oldElement).clone();
//jQuery(oldElement).attr('id', fileId);
//jQuery(oldElement).before(newElement);
//jQuery(oldElement).appendTo(form);

//改版
if(typeof(fileElementId) == 'string'){
fileElementId = "["+fileElementId+"]";
}
var file_array = fileElementId.toString().split(",");
$.each(file_array,function(i){
var oldElement = jQuery('#' + file_array[i]);
jQuery(oldElement).appendTo(form);
});

<!--index.html-->
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" href="css/style.css" />
<!--<script type="text/javascript" src="js/jquery-2.1.0.js"></script>-->
<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
<script type="text/javascript" src="js/ajaxfileupload.js"></script>
<script type="text/javascript" src="js/script.js"></script>

<title>吉他谱</title>
</head>

<body>
<div class="admin_upload">
<form id="upload_form" method="post" action="upload.php">

<div class="admin_upload_item">
<div class="admin_upload_row">
<label class="admin_upload_label" for="gtpname">名称<b></b></label>
<input class="admin_upload_input" type="text" id="gtpname" name="gtpname"  value="" />
</div>
<div class="admin_upload_row">
<label class="admin_upload_label" for="singer">歌手<b></b></label>
<input class="admin_upload_input" type="text" id="singer" name="singer" value="" />
</div>
<div class="admin_upload_row">
<label class="admin_upload_label" for="video">视频<b></b></label>
<input class="admin_upload_input" type="text" id="video" name="video"  value="" />
</div>
<div class="admin_upload_row">
<label class="admin_upload_label" for="audio">音频<b></b></label>
<input class="admin_upload_input" type="text" id="audio" name="audio"  value="" />
</div>
<div class="admin_upload_row">
<label class="admin_upload_label" for="gtp_file_name">吉他谱<b></b></label>
<input class="admin_upload_input file_input_show" type="text" id="gtp_file_name" name="gtp_file_name" value="" title="吉他谱" readonly="readonly" />
<input id="gtp_file_1" class="file_input_hide gtpfile_input_hide" type="file" name="gtp_file_1" value="" />
</div>
</div>
<div class="admin_upload_row">
<label class="admin_upload_label" for="gtp_file_add"><b></b></label>
<input class="gtp_file_add" type="button" value="添加图片" id="gtp_file_add" name="gtp_file_add"/>
</div>
<div id="upload_btn" class="upload_btn">上传</div>
</form>
</div>
<script language="javascript">
var gtpfile=["gtp_file_1"];
jQuery(function() {
$("#gtp_file_add").click(function(){
var index = gtpfile.length+1;
$(".admin_upload_item").append('<div class="admin_upload_row add_row"><label class="admin_upload_label" for="gtp_file_name"><b></b></label> <input class="admin_upload_input file_input_show" type="text" id="gtp_file_name" name="gtp_file_name" value="" title="吉他谱" readonly="readonly" /> <input id="gtp_file_'+index+'" class="file_input_hide gtpfile_input_hide" type="file" name="gtp_file_'+index+'" value="" /> </div>');
gtpfile.push("gtp_file_"+index);
});
$("#upload_btn").click(function() {
var size_check=true;
$.each(gtpfile,function(i){
if ($("#"+gtpfile[i])[0].files[0].size>1048576){
size_check=false;
return false;
}
});
if(size_check){
//加载图标
/* $("#loading").ajaxStart(function(){
$(this).show();
}).ajaxComplete(function(){
$(this).hide();
});*/
var str={
gtpname:$("#gtpname").val(),
singer:$("#singer").val(),
video:$("#video").val(),
audio:$("#audio").val(),
gtpfile:gtpfile
};

//上传文件
$.ajaxFileUpload({
url: 'upload.php',
type:"post",
data: str,
secureuri: false,
fileElementId: gtpfile, //file控件id
dataType: 'json',
success: function(data, status) {
if (typeof(data.error) != 'undefined') {
if (data.error != '') {
alert(data.error);
} else {
alert(data.msg);
}
}
},
error: function(data, status, e) {
alert(e);
}
});
return false;
}else{
alert("服务器空间很珍贵，单张图片请不要超过1M哦！");
}
})
})
</script>
</body>

</html>

<!--upload.php-->
<?php
/**
* Created by PhpStorm.
* User: Administrator
* Date: 2015/11/28 0028
* Time: 19:54
*/
$issuc=true;
$res["error"] = "";//错误信息
$res["msg"] = "";//提示信息
$file_list=explode(',',$_POST['gtpfile']);
for($i=0; $i<count($file_list); $i++){
$upFilePath = "upload/gtp/".time()."_".$i.".".pathinfo($_FILES[$file_list[$i]]['name'],PATHINFO_EXTENSION);
if(move_uploaded_file($_FILES[$file_list[$i]]['tmp_name'],$upFilePath)){
$issuc=true&$issuc;
}else{
$issuc=false&$issuc;
}
}
if($issuc){
$res["msg"] = $_POST['gtpname'].",上传成功！";
}else{
$res["error"] = "error";
}
echo json_encode($res);

我不怎么会php，所以upload.php里面都是瞎写的，修改的ajaxfileupload.js部分每个人按自己的情况修改就行了，不要被我这个局限了思维。

绝对原创。

虽然标题有点老。

有问题的话随便问，反正我也不一定回答的上来。

最后代码附上

http://download.csdn.net/detail/u013082782/9311911

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 文件上传 ajax

相关文章推荐

新的分享

章节导航