MVC中基于Ajax和HTML5实现文件上传功能

为输入文件元素添加多个属性，实现同时选择多个文件。

添加实现拖拽功能的文件，如以下代码所示：

 <div id="drop_zone">Drop images Here</div>

在JS方法MultiplefileSelected中添加onChange事件，与之前SingleFileSelected的写法类似，不同的是需要将所有的文件列出，并允许拖拽文件。代码如下：

 function MultiplefileSelected(evt) {
     evt.stopPropagation();
     evt.preventDefault();
     $('#drop_zone').removeClass('hover');
     selectedFiles = evt.target.files || evt.dataTransfer.files;
     if (selectedFiles) {
       $('#Files').empty();
       for (var i = ; i < selectedFiles.length; i++) {
         DataURLFileReader.read(selectedFiles[i], function (err, fileInfo) {
          if (err != null) {
            var RowInfo = '<div id="File_' + i + '" 
            class="info"><div class="InfoContainer">' +
                    '<div class="Error">' + err + '</div>' +
                   '<div data-name="FileName" 
                   class="info">' + fileInfo.name + '</div>' +
                   '<div data-type="FileType" 
                   class="info">' + fileInfo.type + '</div>' +
                   '<div data-size="FileSize" 
                   class="info">' + fileInfo.size() + 
                   '</div></div><hr/></div>';
            $('#Files').append(RowInfo);
          }
          else {
            var image = '<img src="' + fileInfo.fileContent + 
            '" class="thumb" title="' + 
            fileInfo.name + '" />';
            var RowInfo = '<div id="File_' + i + '" 
            class="info"><div class="InfoContainer">' +
                   '<div data_img="Imagecontainer">' + 
                   image + '</div>' +
                   '<div data-name="FileName" 
                   class="info">' + fileInfo.name + '</div>' +
                   '<div data-type="FileType" 
                   class="info">' + fileInfo.type + '</div>' +
                   '<div data-size="FileSize" 
                   class="info">' + fileInfo.size() + 
                   '</div></div><hr/></div>';
            $('#Files').append(RowInfo);
          }
        });
      }
    }
  }

在该方法中，将选择和拖拽文件操作的变量设置为全局变量selectedFiles，然后扫描 selectedfiles中的每个文件，将从 DataURLreader对象中调用Read 方法读取文件。

DataURLreader对象可调用read方法，并将File对象和回调方法作为read方法参数，在上述方法中我们创建了FileReader，并修改了FileReader的Onload和onerror回调函数。调用 readAsDataURL 方法来读文件。

新建FileInfo对象包括了所有的文件信息及内容。

 var DataURLFileReader = {
     read function (file, callback) {
       var reader = new FileReader();
       var fileInfo = {
         name file.name,
         type file.type,
         fileContent null,
         size function () {
           var FileSize = ;
          if (file.size > ) {
            FileSize = Math.round(file.size * / ) / + " MB";
          }
          else if (file.size > ) {
            FileSize = Math.round(file.size * / ) / + " KB";
          }
          else {
            FileSize = file.size + " bytes";
          }
          return FileSize;
        }
      };
      if (!file.type.match('image.*')) {
        callback("file type not allowed", fileInfo);
        return;
      }
      reader.onload = function () {
        fileInfo.fileContent = reader.result;
        callback(null, fileInfo);
      };
      reader.onerror = function () {
        callback(reader.error, fileInfo);
      };
      reader.readAsDataURL(file);
    }
  };								 
 4/6   首页 上一页 2 3 4 5 6 下一页 尾页