控制图片的上传格式及显示

 1 $(document).on("change","#files",function(e){
 2     
 3      //获得文件信息
 4         fileInfo = e.target.files[0];
 5         if (fileInfo) {
 6             var fileData = {
 7                 Name: fileInfo.name,
 8                 Size: fileInfo.size,
 9                 Time: new Date(),
10             }
11 
12             var fileImgNameArray = fileData.Name.split(".");
13             var imgUrl = "";
14             //判断后缀后执行的方法
15             switch (fileImgNameArray[fileImgNameArray.length-1]) {
16                 case "jpg":
17                 case "png":
18                     imgUrl = window.URL.createObjectURL(fileInfo);
19                     break;
20                 case "doc":
21                 case "docx":
22                     imgUrl = "../../Images/word.png";
23                     break;
24                 case "txt":
25                     imgUrl = "../../Images/txt.png";
26                     break;
27                 case "rar":
28                     imgUrl = "../../Images/ico_rar.png";
29                     break;
30                 case "apk":
31                     imgUrl = "../../Images/ico_apk.png";
32                     break;
33                 case "ppt":
34                     imgUrl = "../../Images/ppt.png";
35                     break;
36                 case "pdf":
37                     imgUrl = "../../Images/PDF.png";
38                     break;
39                 case "xlsx":
40                     imgUrl = "../../Images/xlsx.png";
41                     break;
42                 default:
43                     imgUrl = "../../Images/ico__.png";
44                     
45             }
46             fileData.Url = imgUrl;
47             // var ok = showfileImg(fileData);
48             var showFile = $('<div class="file">'
49                    + ' <div class="fileInfo">'
50                        + ' <div class="fileImg"><img src="' + fileData.Url + '" /></div>'
51                        + ' <div class="fileDescribe">'
52                            + ' <div class="fileName">' + fileData.Name
53                            + '</div>'
54                            
55                    + ' </div>'
56                    + '<div class="delFile icon-action_delete"></div>'
57                 + '</div>')
58 
59             showFile.appendTo($(".getImg").html(""));
60             $(".tip").addClass("hideInfo");
61         }
62 })

1 <body>
2     <div class="getImg"></div>
3     <input type="file" id="files" />
4 </body>

posted on 2017-03-14 17:26 sunnie_c 阅读(261) 评论(0) 收藏举报