在使用jquery发送之前选择要上传的文件
[英]select the file to upload before sending with jquery
问题描述
我希望在将文件发送到服务器之前在接口上选择我的文件。...您可以看到我的截图
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>
但是问题..我无法请求我的文件
2 个解决方案
解决方案1
0 2014-08-18 09:18:58
检查一下
$('#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!");
}
});
从这9 课中获得帮助
解决方案2
0 2014-08-19 09:15:59
最后，出于明显的安全原因，我们无法使用javascrip .....将值设置为“ input”。
我用这个脚本找到了另一个解决方案
<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>
谢谢大家的帮助
blueimp jquery-file-upload如何在上传前取消1个文件
[英]blueimp jquery-file-upload how to cancel 1 file before upload
是否可以在将文件发送到服务器之前使用 javascript 将文件上传到 memory 进行处理？
[英]Is it possible to upload a file in memory using javascript for processing before sending it to server?
带有回形针的jQuery文件上传，在上传之前显示预览图像
[英]jQuery file upload with paperclip, showing preview image before upload
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
Jquery文件上传 - 不在IE9中发送标头
销毁前的jQuery文件上传检查init
在上传之前获取图像的文件名--JQuery
blueimp jquery-file-upload如何在上传前取消1个文件
上传前jQuery-File-Upload重命名文件
jQuery 文件上传 - 单次上传多次发送数据
是否可以在将文件发送到服务器之前使用 javascript 将文件上传到 memory 进行处理？
带有回形针的jQuery文件上传，在上传之前显示预览图像
Blueimp jQuery-File-Upload：上传之前的用户反馈
如何在发送表单之前使用jquery选择表单ID
相关标签