Javascript 输入文件未将文件上载到服务器
在模式中上载之前使用fileupload对象显示文件时出现问题 即使尝试制作DOM对象的浅拷贝来使用它，但它仍然不起作用 请给我一个可能解决这个问题的办法 HTML和javascript请参见FileConfigHandler方法Javascript 输入文件未将文件上载到服务器,javascript,c#,asp.net-mvc,ecmascript-6,Javascript,C#,Asp.net Mvc,Ecmascript 6,在模式中上载之前使用fileupload对象显示文件时出现问题 即使尝试制作DOM对象的浅拷贝来使用它，但它仍然不起作用 请给我一个可能解决这个问题的办法 HTML和javascript请参见FileConfigHandler方法 <div id="filedata"></div> <div class="col-md-9"> <div class="homepage_contant">
<div id="filedata"></div>
<div class="col-md-9">
<div class="homepage_contant">
<div class="container">
<!-- Start File Upload Section -->
<h4>File Upload</h4>
<form id="drag-and-drop-zone" class="upload_container" action="/Home/Upload" method="POST" enctype="multipart/form-data" ondrop="dropHandler(event);">
<div class="text-center">
<img class="cloud_upload_img" src="~/Content/images/cloud.png" />
<p>Drag & Drop Files Here or <span class="browse_btn_holder">Browse <input class="browse_btn" type="file" accept=".xls..xlsx image/* " multiple id="mfile" name="mfile" title='Click to add Files' /> </span> to upload files</p>
</div>
<!-- Modal -->
<div class="upload_file_modal modal" id="uploadFileModal" tabindex="-1" role="dialog" aria-labelledby="uploadFileModal" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">File Upload</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="container">
<ul class="list-unstyled p-2 d-flex flex-column col" style="padding:0 !important" id="files">
<li class="text-muted text-center empty"><p id="txt"> Files has been seleted. </p></li>
</ul>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="upload_field_wrap">
<label for="ItemTitle"> File Title</label>
<input type="text" class="form-control" id="title" name="title" />
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<div class="upload_field_wrap">
@Html.DropDownList("Department", ViewBag.lst as SelectList, "Select Department", new { @class = "form-control" })
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<div class="upload_field_wrap">
<select class="form-control" id="CourseId" name="CourseId">
<option value="" disabled selected>Course</option>
</select>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<div class="upload_field_wrap">
<select class="form-control" id="category" name="category">
<option value="" disabled selected>Select Category</option>
<option value="mid">
Mid Term
</option>
<option value="final">
Final
</option>
<option value="quiz">
Quiz
</option>
<option value="summary">
Summary
</option>
</select>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<div class="upload_field_wrap">
<select id="yearOfPublish" name="yearOfPublish" class="form-control">
<option value="" disabled> Select Year</option>
@for (int i = 2000; i < 2020; i++)
{
<option value="@i">@i</option>
}
</select>
</div>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<div class="upload_field_wrap">
<label for="description">Description</label>
<textarea class="form-control" id="" rows="3"></textarea>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>
</form>
<!-- End File Upload Section -->
@section scripts
{
<script src="~/Scripts/jquery.dm-uploader.min.js"></script>
<script src="~/Scripts/upload_file_ui.js"></script>
<script>
function dropHandler(event) {
event.preventDefault();
mfile.files = event.dataTransfer.files;
console.log(mfile);
//ChangeImageHandler();
FileConfigHandler();
}
function formatBytes(bytes, decimals) {
if (bytes == 0) return '0 Bytes';
var k = 1024,
dm = decimals <= 0 ? 0 : decimals || 2,
sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
i = Math.floor(Math.log(bytes) / Math.log(k));
return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
}
function ChangeImageHandler()
{
var x = $('#mfile').val();
let file = $('#mfile')[0].files[0];
var size = $('#mfile')[0].size;
var sizeWithTag = formatBytes(size);
$('#item_size').text(sizeWithTag);
$('#item_title').text(file.name);
if (x.split('.').pop()=='pdf') {
$("#item_type_img").attr("src", "../../Content/images/files_types/pdf.png");
}
else if (x.split('.').pop() == 'docx') {
$("#item_type_img").attr("src", "../../Content/images/files_types/doc.png");
}
else if (x.split('.').pop() == 'jpg') {
$("#item_type_img").attr("src", "../../Content/images/files_types/jpg.png");
}
else if (x.split('.').pop() == 'png') {
$("#item_type_img").attr("src", "../../Content/images/files_types/png.png");
}
else if (x.split('.').pop() == 'ppt') {
$("#item_type_img").attr("src", "../../Content/images/files_types/ppt.png");
}
else if (x.split('.').pop() == 'txt') {
$("#item_type_img").attr("src", "../../Content/images/files_types/txt.png");
}
else if (x.split('.').pop() == 'xls') {
$("#item_type_img").attr("src", "../../Content/images/files_types/xls.png");
}
else if (x.split('.').pop() == 'csv') {
$("#item_type_img").attr("src", "../../Content/images/files_types/csv.png");
}
console.log();
}
function FileConfigHandler()
{
console.log('chal raha h')
var files1 = mfile.files;
console.log(mfile.files);
for (var i = 0; i < files1.length; i++) {
// console.log(files1[i]);
//var x= AddChild(files1[i]);
$('#files').append(x);
}
}
function AddChild(item)
{
var template = $('#files-template').html();
var parent = $(template);
var extention = item.name.split('.').pop();
// console.log(item.name.split('.').pop());
var name = item.name;
var temp_size = item.size;
var size = formatBytes(temp_size);
parent.find('#item_size').text(size)
parent.find('#item_title').text(name)
if (extention == 'pdf') {
$(parent).find('.item_type_img').attr("src", "../../Content/images/files_types/pdf.png");
}
else if (extention == 'docx') {
$(parent).find('.item_type_img').attr("src", "../../Content/images/files_types/doc.png");
}
else if (extention == 'jpg') {
$(parent).find('.item_type_img').attr("src", "../../Content/images/files_types/jpg.png");
}
else if (extention == 'png') {
$(parent).find('.item_type_img').attr("src", "../../Content/images/files_types/png.png");
}
else if (extention == 'ppt') {
$(parent).find('.item_type_img').attr("src", "../../Content/images/files_types/ppt.png");
}
else if (extention == 'txt') {
$(parent).find('.item_type_img').attr("src", "../../Content/images/files_types/txt.png");
}
else if (extention == 'xls') {
$(parent).find('.item_type_img').attr("src", "../../Content/images/files_types/xls.png");
}
else if (extention == 'csv') {
$(parent).find('.item_type_img').attr("src", "../../Content/images/files_types/csv.png");
}
return '<li class="uploaded_item">' + parent.html() + '</li>'
}
//function dropHandler(ev) {
// console.log('File(s) dropped');
// // Prevent default behavior (Prevent file from being opened)
// ev.preventDefault();
// var file = ev.dataTransfer.files;
// // var file = e.originalEvent.dataTransfer.files;
// var fileData = new FormData();
// for (var i = 0; i < file.length; i++) {
// fileData.append("fileData", ev.dataTransfer.files[i]);
// }
//if (ev.dataTransfer.items) {
// // Use DataTransferItemList interface to access the file(s)
// for (var i = 0; i < ev.dataTransfer.items.length; i++) {
// // If dropped items aren't files, reject them
// if (ev.dataTransfer.items[i].kind === 'file') {
// file[i] = ev.dataTransfer.items[i].getAsFile();
// fileData.append("fileData",ev.dataTransfer.files[i]);
// console.log('... file[' + i + '].name = ' + file.name);
// }
// }
//} else {
// // Use DataTransfer interface to access the file(s)
// for (var i = 0; i < ev.dataTransfer.files.length; i++) {
// fileData.append("fileData", ev.dataTransfer.files[i]);
// console.log('... file[' + i + '].name = ' + ev.dataTransfer.files[i].name);
// }
//}
// $.ajax({
// type: "POST",
// dataType: "json",
// enctype: 'multipart/form-data',
// url:'/Home/SendFile',
// contentType: false, // Not to set any content header
// processData: false, // Not to process data
// data: fileData,
// success: function (result, status, xhr) {
// alert(result);
// },
// error: function (xhr, status, error) {
// alert(status);
// }
// })
//}
$(document).ready(function () {
$('#uploadFileModal').hide();
$('#drag-and-drop-zone').dmUploader({
onDragEnter: function () {
// Happens when dragging something over the DnD area
this.addClass('active');
$('.upload_container .cloud_upload_img').addClass('animated infinite shake')
},
onDragLeave: function (e) {
// Happens when dragging something OUT of the DnD area
this.removeClass('active');
$('.upload_container .cloud_upload_img').removeClass('animated infinite shake');
//readmultifiles(document.getElementById('#file'));
$('#uploadFileModal').modal("show");
}})
})
$('#mfile').change(function () {
console.log(mfile.files);
$('#uploadFileModal').modal("show");
//document.getElementById("#txt").innerHTML = "1 file has been Selected";
// console.log(mfile.files);
//ChangeImageHandler();
FileConfigHandler();
});
$("#Department").change(function () {
LoadDepartments();
});
function LoadDepartments() {
var collegeId = document.getElementById("Department");
var ID = collegeId.options[collegeId.selectedIndex].value;
var depatments = document.getElementById("CourseId");
console.log(ID);
$.ajax({
url: '@Url.Action("getCourses", "Home")',
type: 'GET',
dataType: "json",
data: { idString: ID },
success: function (result) {
console.log(result)
depatments.innerHTML = "";
$.each(result, function (i, result) {
var options = "<option value='" + result.Id + "' id='" + result.Id + "'>" + result.name + "</option>";
$('#CourseId').append(options);
});
},
failure: function (response) {
alert(response.responseText);
console.log(response.responseText);
},
error: function (response) {
alert(response.responseText);
console.log(response.responseText);
}
});
}
</script>
}
<!-- Debug item template -->
<script type="text/html" id="debug-template">
<li class="list-group-item text-%%color%%"><strong>%%date%%</strong>: %%message%%</li>
</script>
<!-- File item template -->
<script type="text/template" id="files-template">
<li class="uploaded_item">
<div class="item_body">
<div class="item_img_and_info_holder">
<div class="item_type_img_holder">
<img class="item_type_img" id="item_type_img" src="../../Content/images/files_types/pdf.png" />
</div>
<div class="item_info" style="width: 100%">
<h6 class="item_title" id="item_title">%%filename%% </h6>
<div class="item_details" style="margin-bottom: 10px;">
<span class="item_size" id="item_size">00.0 MB</span>
</div>
</div>
</div>
</div>
</li>
</script>
文件上传
拖放；在此处放置文件或浏览以上载文件
文件上传
&时代；
已选择文件
文件名
@DropDownList（“Department”，ViewBag.lst作为SelectList，“selectdepartment”，new{@class=“form control”}）
课程
选择类别
中期
最终的
测验
总结
选择年份
@对于（int i=2000；i<2020；i++）
{
@我
}
描述
拯救
@节脚本
{
函数dropHandler（事件）{
事件预防
function FileConfigHandler()
{
console.log('chal raha h')
var files1 = mfile.files;
console.log(mfile.files);
for (var i = 0; i < files1.length; i++) {
// console.log(files1[i]);
//var x= AddChild(files1[i]);
$('#files').append(x);
}
}
function AddChild(item)
{
var template = $('#files-template').html();
var parent = $(template);
var extention = item.name.split('.').pop();
// console.log(item.name.split('.').pop());
var name = item.name;
var temp_size = item.size;
var size = formatBytes(temp_size);
parent.find('#item_size').text(size)
parent.find('#item_title').text(name)
if (extention == 'pdf') {
$(parent).find('.item_type_img').attr("src", "../../Content/images/files_types/pdf.png");
}
else if (extention == 'docx') {
$(parent).find('.item_type_img').attr("src", "../../Content/images/files_types/doc.png");
}
else if (extention == 'jpg') {
$(parent).find('.item_type_img').attr("src", "../../Content/images/files_types/jpg.png");
}
else if (extention == 'png') {
$(parent).find('.item_type_img').attr("src", "../../Content/images/files_types/png.png");
}
else if (extention == 'ppt') {
$(parent).find('.item_type_img').attr("src", "../../Content/images/files_types/ppt.png");
}
else if (extention == 'txt') {
$(parent).find('.item_type_img').attr("src", "../../Content/images/files_types/txt.png");
}
else if (extention == 'xls') {
$(parent).find('.item_type_img').attr("src", "../../Content/images/files_types/xls.png");
}
else if (extention == 'csv') {
$(parent).find('.item_type_img').attr("src", "../../Content/images/files_types/csv.png");
}
return '<li class="uploaded_item">' + parent.html() + '</li>'
}