emperatorphp
شنبه 15 فروردین 1394, 15:58 عصر
css:
.file-wrapper{
width: 300px;
height: 20px;
text-align: right;
background: #FFF;
padding: 2px;
/* box-shadow: 2px 2px 2px #EEE; */
/* -webkit-border-radius: 4px; */
border-radius: 4px;
border-bottom: 1px solid #B6D7DD;
border-left: 1px solid #B6D7DD;
overflow: hidden;
margin-bottom: 4px;
}
.file-wrapper .theFile{
visibility : hidden;
opacity: 0;
}
.file-wrapper .file-button{
color: #949494;
font-family: tahoma;
font-size: 11px;
padding: 2px 3px 3px;
background: #eee;
-webkit-border-radius: 4px;
border-radius: 4px;
border: 1px solid #B8B8B8;
cursor: pointer;
}
.file-wrapper .file-cointer{
font-family: tahoma;
font-size: 10px;
color: #747474;
padding-right: 2px;
padding-left: 5px;
}
.add-more{
color: #7B7B7B;
font-family: tahoma;
font-size: 11px;
padding: 3px 4px;
background: #eee;
-webkit-border-radius: 4px;
border-radius: 4px;
border: 1px solid #B8B8B8;
cursor: pointer;
direction: rtl;
/* margin-top: 5px; */
display: inline-block;
}
html:
<div class="file-wrapper"> <span class="file-button">افزودن فایل</span> <span class="file-cointer"></span> <input class="theFile" type="file" name="theFile[]"> </div>
js:
/* file fields click */
$(".file-button").live("click", function() {
var file = $(this).closest(".file-wrapper").find(".theFile");
file.trigger('click');
});
/** select file to upload **/
$(".theFile").live("change", function() {
var the_val = $(this).val();
var filenameCointer = $(this).closest(".file-wrapper").find(".file-cointer");
if (the_val === '') {
$(this).val("");
filenameCointer.html("");
return false;
}
var allowed_ext = Array('doc', 'docx', 'pdf', 'zip', 'rar', 'gzip');
var allowed_max_size = 1536 /*1.5mb*/ ;
the_val = the_val.split('\\');
the_val = the_val[the_val.length - 1];
var filename = the_val;
if (typeof filename !== "undefined" && filename !== "") {
var ext = the_val.split('.');
filename = filename.replace("." + ext, "");
filename = filename.length > 30 ? filename.substring(0, 30) + "..." : filename;
ext = ext[ext.length - 1].toLowerCase();
}
var size = parseInt(($(this)[0].files[0].size) / 1024);
var isDublicate = false;
$('.file-wrapper .file-cointer').each(function() {
if (filename === $(this).html()) {
alert("این فایل قبلاً برای بارگزاری انتخاب شده است");
isDublicate = true;
return false;
}
});
if (isDublicate)
return false;
if (size > allowed_max_size) {
alert("فایل مورد نظر بیش از اندازه مجاز می باشد \nاندازه مجاز برای ارسال " + allowed_max_size + " کیلوبایت می باشد ");
$(this).val("");
filenameCointer.html("");
return false;
}
if (jQuery.inArray(ext, allowed_ext) < 0) {
alert('\n\nتوجه\nفايلي با اين فرمت را نمي توانيد براي بارگزاري انتخاب نماييد\n\nفرمتهاي قابل بارگزاري \n' + allowed_ext + '\n\n');
$(this).val("");
filenameCointer.html("");
return false;
}
filenameCointer.html(filename);
});
/* add more */
$(".add-more").live("click", function() {
var form = $(".fields-area");
var count = $(".fields-area div.file-wrapper").length;
var max = 3;
if (count >= max) {
alert("تنها می توان تعداد " + max + " فیلد ایجاد نمود ");
return false;
}
count = count > 0 ? count++ : count;
var div = '<div class=file-wrapper><span class=file-button>افزودن فایل</span> <span class=file-cointer></span> <input class=theFile type=file name="theFile[]"></div>';
form.append(div);
});
موفق باشید
مرسی واقعا مرسی ولی برادر روی دگمه کلیک میکنم کادر open باز نمیشه