Code du plug-in de téléchargement d'images de téléphone portable H5

Cet article présente principalement en détail le plug-in de téléchargement d'images H5. Basé sur zepto, il prend en charge le téléchargement multi-fichiers, la progression et l'aperçu des images. Les amis intéressés peuvent s'y référer

Basé sur zepto, prend en charge le téléchargement multi-fichiers, la progression et l'aperçu des images, pour les téléphones mobiles.

(function ($) {
 $.extend($, {
 fileUpload: function (options) {
  var para = {
  multiple: true,
  filebutton: ".filePicker",
  uploadButton: null,
  url: "/home/MUploadImg",
  filebase: "mfile",//mvc后台需要对应的名称
  auto: true,
  previewZoom: null,
  uploadComplete: function (res) {
   console.log("uploadComplete", res);
  },
  uploadError: function (err) {
   console.log("uploadError", err);
  },
  onProgress: function (percent) { // 提供给外部获取单个文件的上传进度，供外部实现上传进度效果
   console.log(percent);
  },
  };
  para = $.extend(para, options);

  var $self = $(para.filebutton);
  //先加入一个file元素
  var multiple = ""; // 设置多选的参数
  para.multiple ? multiple = "multiple" : multiple = "";
  $self.css('position', 'relative');
  $self.append(&#39;<input id="fileImage" style="opacity:0;position:absolute;top: 0;left: 0;width:100%;height:100%" type="file" size="30" name="fileselect[]" &#39; + multiple + &#39;>&#39;);

var doms = {
  "fileToUpload": $self.parent().find("#fileImage"),
  // "thumb": $self.find(".thumb"),
  // "progress": $self.find(".upload-progress")
  };
  var core = {
  fileSelected: function () {
   var files = (doms.fileToUpload)[0].files;
   var count = files.length;
   console.log("共有" + count + "个文件");
   for (var i = 0; i < count; i++) {
   var item = files[i];
   console.log(item.size);
   if (para.auto) {
    core.uploadFile(item);
   }
   core.previewImage(item);
   }
  },

  uploadFile: function (file) {
   console.log("开始上传");
   var formdata = new FormData();

   formdata.append(para.filebase, file);//这个名字要和mvc后台配合

   var xhr = new XMLHttpRequest();
   xhr.upload.addEventListener("progress", function (e) {

   var percentComplete = Math.round(e.loaded * 100 / e.total);
   para.onProgress(percentComplete.toString() + &#39;%&#39;);
   });
   xhr.addEventListener("load", function (e) {
   para.uploadComplete(xhr.responseText);
   });
   xhr.addEventListener("error", function (e) {
   para.uploadError(e);
   });

   xhr.open("post", para.url, true);
   //xhr.setRequestHeader("X_FILENAME", file.name);
   xhr.send(formdata);
  },
  uploadFiles: function () {
   var files = (doms.fileToUpload)[0].files;
   for (var i = 0; i < files.length; i++) {
   core.uploadFile(files[i]);
   }
  },
  previewImage: function (file) {
   if (!para.previewZoom) return;
   var img = document.createElement("img");
   img.file = file;
   $(para.previewZoom).append(img);
   // 使用FileReader方法显示图片内容
   var reader = new FileReader();
   reader.onload = (function (aImg) {
   return function (e) {
    aImg.src = e.target.result;
   };
   })(img);
   reader.readAsDataURL(file);
  }
  }
  doms.fileToUpload.on("change", function () {
  //doms.progress.find("span").width("0");
  console.log("选中了文件");
  core.fileSelected();
  });

  console.log("初始化!");
  //绑定事件

  $(document).on("click", para.filebutton, function () {
  console.log("clicked");
  //doms.fileToUpload.click();
  });
  if (para.uploadButton) {
  $(document).on("click", para.uploadButton, function () {
   core.uploadFiles();
  });
  }
 }
 });
})(Zepto);

Explication simple : le téléchargement repose toujours sur l'élément file, j'en ai donc ajouté un masqué au début. Un simple masquage posera parfois quelques problèmes. L'événement de changement de fichier ne peut pas être déclenché. Nous avons donc utilisé la transparence et défini la classe parent en position relative. Obtenez ensuite le fichier à télécharger via l'événement de modification du fichier et placez-le dans formdata, puis utilisez xmlHttpRequest pour effectuer la demande. La barre de progression est directement liée à l'événement de processus. L'aperçu du fichier est filereader. Une autre chose à noter est le paramètre filebase, qui correspond au nom du paramètre de la méthode de téléchargement en arrière-plan MVC. S'il est incohérent, l'arrière-plan ne pourra pas obtenir le fichier. Je ne parlerai pas de la fonction de rappel.

 [HttpPost]
 public ActionResult MUploadImg(HttpPostedFileBase mfile)
 {
  return UploadImg(mfile, "Mobile");
 }

 [HttpPost]
 public ActionResult UploadImg(HttpPostedFileBase file, string dir = "UserImg")
 {
  if (CheckImg(file, imgtypes) != "ok") return Json(new { Success = false, Message = "文件格式不对！" }, JsonRequestBehavior.AllowGet);

  if (file != null)
  {
  var path = "~/Content/UploadFiles/" + dir + "/";
  var uploadpath = Server.MapPath(path);
  if (!Directory.Exists(uploadpath))
  {
   Directory.CreateDirectory(uploadpath);
  }
  string fileName = Path.GetFileName(file.FileName);// 原始文件名称
  string fileExtension = Path.GetExtension(fileName); // 文件扩展名
  //string saveName = Guid.NewGuid() + fileExtension; // 保存文件名称 这是个好方法。
  string saveName = Encrypt.GenerateOrderNumber() + fileExtension; // 保存文件名称 这是个好方法。
  file.SaveAs(uploadpath + saveName);

  return Json(new { Success = true, SaveName = path + saveName });
  }
  return Json(new { Success = false, Message = "请选择要上传的文件！" }, JsonRequestBehavior.AllowGet);

 }

Appel :

<p class="page" id="upload">
 <h2>UploadImg</h2>
 <p id="dd" class="filePicker">点击选择文件</p>
 <p id="preview"></p>
</p>
<script>
 $.fileUpload({ filebutton: "#dd", previewZoom: "#preview" });
</script>

se développe en $object au lieu de $.fn car ce dernier n'est pas pratique lors de la liaison d'événements dans zepto. La transmission d'un identifiant ou d'un nom de style est facile à lier. Le téléphone mobile peut afficher automatiquement l'appareil photo et l'album photo. Par défaut, les images ne sont pas prévisualisées. La zone d'aperçu doit être spécifiée. La barre de progression doit être stylisée seule.

L'effet du téléchargement de 2 photos en même temps :

Ce qui précède représente l'intégralité du contenu de cet article , j'espère que cela sera utile à l'apprentissage de tout le monde. Pour obtenir de l'aide, veuillez faire attention au site Web PHP chinois pour plus de contenu connexe !

Recommandations associées :

Code de fonction H5 pour implémenter le téléchargement d'images locales et leur prévisualisation

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!