我希望在界面发送到服务器之前选择我的文件....你可以看到我的截图
http://screencast.com/t/G2diXiysNKrm
我的剧本：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<style >
.attachmentSelect {
display: block;
font-family: courier;
font-size: 11px;
width: 650px;
}
ption:checked {
background-color: -moz-html-cellhighlight !important;
color: -moz-html-cellhighlighttext !important;
}
select > option {
-moz-padding-end: 5px;
-moz-padding-start: 3px;
padding-bottom: 0;
padding-top: 0;
}
option {
-moz-user-select: none;
display: block;
float: none !important;
line-height: normal !important;
min-height: 1em;
position: static !important;
text-indent: 0;
white-space: nowrap !important;
word-wrap: normal !important;
}
ul,
li {
margin: 0;
padding: 0;
}
li {
/*
background: none repeat scroll 0 0 #F1F1F1;
border-bottom: 1px solid #CCCCCC;
cursor: pointer;
margin-top: 1px;
padding: 3px;*/
background: none repeat scroll 0 0 #EEEEEE;
border: 1px solid #CCCCCC;
color: #0088CC;
display: block;
margin: 5px;
padding: 5px;
cursor: move;
}
.fl { float: left; }
.fr { float: right; }
.remove {
background: url("img/delete16x16.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
cursor: pointer;
height: 16px;
overflow: hidden;
text-indent: -9999px;
width: 16px;
overflow:hidden;
}
.sortable-placeholder {
background-color: #F3F3F3;
border: 1px dashed #ccc;
font-size: 45px;
/* height: 30px;*/
padding-left: 10px;
padding-right: 10px;
text-align: center;
}
</style>
<script src="js/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="js/jquery-ui.min.js"></script>
<script src="http://markusslima.github.io/bootstrap-filestyle/js/bootstrap-filestyle.min.js"></script>
</head>
<body>
<br />
<br />
<!-- IMPORTANT: FORM's enctype must be "multipart/form-data" -->
<form method="post" action="uploadfileOne.php" enctype="multipart/form-data">
<br />
<br />
<div class="row">
<div class="col-md-8">
<!-- ToUpload[] -->
<input class="filestyle" value="" data-buttonName="btn-primary" id="upload" name="" type="file" value="" />
<br />
<br />
<ul class="attachmentSelect" >
</ul>
<!-- <input type="file" class="filestyle" data-buttonName="btn-primary"> -->
</div>
<div class=".col-md-4"> <a id="add" class="btn btn-default" href="#" >add</a></div>
</div>
<!--<input class="btn btn-default" type="submit" name="" /> -->
<br />
<br />
<!--<div class="sortable-placeholder"></div>-->
<button type="submit" class="btn btn-default">Submit</button>
<!--<input type="hidden" name="MAX_FILE_SIZE" value="100000">-->
<div id="list-input"></div>
</form>
<script type="text/javascript">
$(document).ready(function() {
//----------------------
var i=0;
$('#add').click(function(){
var path= $('input#upload').val();
if(path !=""){
$('.attachmentSelect').append('<li id="file'+i+'" data-path='+path+'>'+path+' <a class="fr remove" title="Supprimer" href="javascript:void(0);">remove</a><input style="display:none;" name="file'+i+'" type="file" /></li>');
$('input#upload').val('')
i++
}
});
//----------------------
$('.remove').on('click', function() {
$(this).closest('li').remove();
});
//----------------------
$(".attachmentSelect").sortable({
cursor : 'move',
cursorAt : { left : 0 },
placeholder: "sortable-placeholder",
forcePlaceholderSize : true,
dropOnEmpty : false,
connectWith : 'ul'
});
//----------------------
});
/**/
$('.attachmentSelect').on('click', '.remove', function(){
var currentFile = $(this).parent('li').attr('id');
$(this).closest('li').remove();
$('input[name='+currentFile+']').remove();
});
</script>
</body>
</html>
但问题是..我无法请求我的文件
萤火虫： http://screencast.com/t/oqkUen7SyBIr答案 0 :(得分：0)
检查
$('#i_submit').click( function() {
//check whether browser fully supports all File API
if (window.File && window.FileReader && window.FileList && window.Blob)
{
//get the file size and file type from file input field
var fsize = $('#i_file')[0].files[0].size;
if(fsize>1048576) //do something if file size more than 1 mb (1048576)
{
alert(fsize +" bites\nToo big!");
}else{
alert(fsize +" bites\nYou are good to go!");
}
}else{
alert("Please upgrade your browser, because your current browser lacks some new features we need!");
}
});
答案 1 :(得分：0)
最后我们无法将值设置为＆＃34;输入＆＃34;与javascrip .....出于明显的安全原因。
我找到了另一个使用此脚本的解决方案
<br />
<br />
<form name="upload" method="post" action="" enctype="multipart/form-data">
<br />
<br />
<div class="row">
<div class="col-md-8">
<div id="upload">
<input type="file" name="fileupload[]">
</div>
<br />
<br />
<ul class="attachmentSelect" ></ul>
</div>
<!--<div class=".col-md-4"> <a id="add" class="btn btn-default" href="#" >add</a></div>-->
</div>
<br />
<br />
<input type="submit" name="submit">
</form>
<script type="text/javascript">
var i=0;
//----------------------
$(document).on('change','#upload input',function(){
var path= $(this).val();
if(path !=""){
$('.attachmentSelect').append('<li id="file'+i+'" >'+path+' <a class="fr remove" title="Supprimer" href="javascript:void(0);">remove</a></li>');
$(this).appendTo('#file'+i).css('display','none');
$('#upload').append('<input type="file" name="fileupload[]">');
i++
}
});
//----------------------
$('.remove').on('click', function() {
$(this).closest('li').remove();
});
//----------------------
$('.attachmentSelect').on('click', '.remove', function(){
var currentFile = $(this).parent('li').attr('id');
$(this).closest('li').remove();
// $('input[name='+currentFile+']').remove();
});
//--------------------
$(".attachmentSelect").sortable({
cursor : 'move',
cursorAt : { left : 0 },
placeholder: "sortable-placeholder",
forcePlaceholderSize : true,
dropOnEmpty : false,
connectWith : 'ul'
})
</script>
感谢您的帮助