.net多张图片上传并且预览-img文件

首先在html页面添加一个添加按钮加上点击事件app();


  1. <input type="button" value="添加图片" onclick="app();" id="btnInsertImg" />

然后在 <script type="text/javascript">里写一个app()方法,这里写一个计数器使预览div的id每张图片都不同


  1. var imgIndex = 1;//计数器
  2. function app() {
  3. $("#imgContainer").append("<div><div style=\"margin-top:10px;\">" +
  4. "<input type=\"file\" name=\"file\" onchange=\"javascript:setImagePreview(this,"+imgIndex+");\"/>" +
  5. "<input type=\"button\" value=\"删除\" onclick=\"delfile(this)\" />" +
  6. "<input type=\"button\" value=\"上移\" onclick=\"up(this)\" />" +
  7. "<input type=\"button\" value=\"下移\" onclick=\"down(this)\" />" +
  8. "</div>"+
  9. "<div id=\"localImag_"+imgIndex+"\">"+
  10. "<img id=\"preview_" + imgIndex + "\" alt=\"\" />" +
  11. "</div></div>");
  12. imgIndex++;
  13. }

app()方法里用到setImagePreview(),这里注意要把计数器imgIndex传过来。


  1. function setImagePreview(obj, index) {
  2. var array = new Array('gif', 'jpeg', 'png', 'jpg', 'bmp'); //可以上传的文件类型
  3. if (obj.value == '') {
  4. $.messager.alert("让选择要上传的图片!");
  5. return false;
  6. }
  7. else {
  8. var localImagId = document.getElementById("localImag_" + index);
  9. var imgObjPreview = document.getElementById("preview_" + index);
  10. var fileContentType = obj.value.match(/^(.*)(\.)(.{1,8})$/)[3]; //这个文件类型正则很有用
  11. ////布尔型变量
  12. var isExists = false;
  13. //循环判断图片的格式是否正确
  14. for (var i in array) {
  15. if (fileContentType.toLowerCase() == array[i].toLowerCase()) {
  16. //图片格式正确之后,根据浏览器的不同设置图片的大小
  17. if (obj.files && obj.files[0]) {
  18. //火狐下,直接设img属性
  19. imgObjPreview.style.display = 'block';
  20. imgObjPreview.style.width = '100px';
  21. imgObjPreview.style.height = '100px';
  22. //火狐7以上版本不能用上面的getAsDataURL()方式获取,需要一下方式
  23. imgObjPreview.src = window.URL.createObjectURL(obj.files[0]);
  24. }
  25. else {
  26. //IE下,使用滤镜
  27. obj.select();
  28. var imgSrc = document.selection.createRange().text;
  29. //必须设置初始大小
  30. localImagId.style.width = "100px";
  31. localImagId.style.height = "100px";
  32. //图片异常的捕捉,防止用户修改后缀来伪造图片
  33. try {
  34. localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
  35. localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
  36. }
  37. catch (e) {
  38. $.messager.alert("您上传的图片格式不正确,请重新选择!");
  39. return false;
  40. }
  41. imgObjPreview.style.display = 'none';
  42. document.selection.empty();
  43. }
  44. isExists = true;
  45. return true;
  46. }
  47. }
  48. if (isExists == false) {
  49. $.messager.alert("上传图片类型不正确!");
  50. return false;
  51. }
  52. return false;
  53. }
  54. }

删除,上移,下移方法


  1. function delfile(obj) {
  2. $(obj).parent().parent().remove();
  3. }
  4. function up(obj) {
  5. $(obj).parent().prev().before($(obj).parent());
  6. }
  7. function down(obj) {
  8. $(obj).parent().next().after($(obj).parent());
  9. }

效果图

.net多张图片上传并且预览

点击添加图片

.net多张图片上传并且预览

点击选择文件

.net多张图片上传并且预览

添加多张

.net多张图片上传并且预览

推荐阅读