imgUp.js 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546
  1. /**
  2. * Created by zhiji on 2017/8/4.
  3. */
  4. //图片上传预览
  5. function imgChange(obj1, obj2) {
  6. //获取点击的文本框
  7. var file = document.getElementsByClassName(obj1)[0];
  8. //获取的图片文件
  9. var fileList = file.files;
  10. //文本框的父级元素
  11. var input = document.getElementsByClassName(obj2)[0];
  12. var imgArr = [];
  13. //遍历获取到得图片文件
  14. for (var i = 0; i < fileList.length; i++) {
  15. var imgUrl = window.URL.createObjectURL(file.files[i]);
  16. imgArr.push(imgUrl);
  17. var img = document.createElement("img");
  18. img.setAttribute("src", imgArr[i]);
  19. var imgAdd = document.createElement("div");
  20. imgAdd.setAttribute("class", "z_addImg");
  21. var delBtn = document.createElement("span");
  22. delBtn.setAttribute("class", "del-btn");
  23. imgAdd.appendChild(delBtn);
  24. imgAdd.appendChild(img);
  25. input.before(imgAdd);
  26. };
  27. imgRemove();
  28. };
  29. //删除图片
  30. function imgRemove() {
  31. var imgList = document.getElementsByClassName("z_addImg");
  32. for (var j = 0; j < imgList.length; j++) {
  33. imgList[j].index = j;
  34. imgList[j].onclick = function() {
  35. var t = this;
  36. $.confirm("确定要删除图片吗?", function() {
  37. //点击确认后的回调函数
  38. t.remove();
  39. }, function() {
  40. //点击取消后的回调函数
  41. });
  42. }
  43. };
  44. };