簡單js fileUpload控件(單例)

single_file_upload.js

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

<code>var</code> <code>YsUIWidgets=YsUIWidgets||{};</code>

<code>YsUIWidgets.uploadFile = (</code><code>function</code><code>($){</code>

<code>    </code><code>var</code> <code>container  = </code><code>null</code><code>;</code>

<code>    </code><code>var</code> <code>changeCallback = </code><code>function</code><code>(){};</code>

<code>    </code><code>var</code> <code>acceptTypes = [</code><code>"jpg"</code><code>,</code><code>"png"</code><code>];</code><code>// 接受的上傳檔案類型</code>

<code>    </code><code>var</code> <code>renderHtml = </code><code>"&lt;input type='file' name='single-file-upload' style='display:none;'/&gt;"</code><code>;</code>

<code>    </code><code>// 添加隐藏的</code>

<code>    </code><code>function</code> <code>renderInputFile(){</code>

<code>        </code><code>// 生成dialog唯一辨別</code>

<code>        </code><code>container = $(renderHtml).appendTo(</code><code>"html"</code><code>); </code><code>// 添加到文檔中去</code>

<code>        </code><code>return</code> <code>container;</code>

<code>    </code><code>}</code>

<code>    </code><code>function</code> <code>bindEventHandlers(){</code>

<code>        </code><code>$(container).change(</code><code>function</code><code>(e){</code>

<code>            </code><code>e.preventDefault();</code>

<code>            </code><code>e.stopPropagation();</code>

<code>            </code><code>var</code> <code>file = e.target.files[0];</code>

<code>            </code><code>if</code><code>(!validateFileType(file,acceptTypes)){</code>

<code>                </code><code>alert(</code><code>"檔案類型不正确!"</code><code>);</code>

<code>                </code><code>return</code><code>;</code>

<code>            </code><code>}</code>

<code>            </code><code>changeCallback(file);</code>

<code>            </code><code>// 清除value</code>

<code>            </code><code>$(</code><code>this</code><code>).val(</code><code>""</code><code>);</code>

<code>        </code><code>});</code>

<code>    </code><code>// 驗證檔案類型</code>

<code>    </code><code>function</code> <code>validateFileType(file,acceptTypes){console.log(</code><code>"valid"</code><code>);</code>

<code>        </code><code>var</code> <code>name = file.name;</code>

<code>        </code><code>var</code> <code>fileSuffix = name.substr(name.lastIndexOf(</code><code>"."</code><code>)+1);</code>

<code>        </code><code>for</code><code>(</code><code>var</code> <code>i=0;i&lt;acceptTypes.length;i++){</code>

<code>            </code><code>var</code> <code>acceptType = acceptTypes[i];</code>

<code>            </code><code>if</code><code>(acceptType==fileSuffix){</code>

<code>                </code><code>return</code> <code>true</code><code>;</code>

<code>        </code><code>}</code>

<code>        </code><code>return</code> <code>false</code><code>;</code>

<code>    </code><code>var</code> <code>initialized = </code><code>false</code><code>;</code>

<code>    </code><code>// 初始化方法</code>

<code>    </code><code>function</code> <code>init(){</code>

<code>        </code><code>if</code><code>(initialized){</code>

<code>            </code><code>return</code><code>;</code>

<code>        </code><code>renderInputFile();</code>

<code>        </code><code>bindEventHandlers();</code>

<code>        </code><code>initialized = </code><code>true</code><code>;</code>

<code>    </code><code>var</code> <code>uploadFile = </code><code>function</code><code>(options){</code>

<code>        </code><code>if</code><code>(!initialized){init();} </code><code>// 如果未初始化則初始化</code>

<code>        </code><code>changeCallback = options.changeCallback||changeCallback;</code>

<code>        </code><code>acceptTypes = options.acceptTypes||acceptTypes;</code>

<code>        </code><code>$(container).click();</code>

<code>    </code><code>};</code>

<code>    </code><code>return</code> <code>uploadFile;</code>

<code>})(jQuery);</code>

 本文轉自 antlove 51CTO部落格，原文連結:http://blog.51cto.com/antlove/1864250