对file输入框的美化，换成图片的形式

重点代码如下：

 

http://topic.csdn.net/t/20021015/15/1098840.html

 

<input   id=a1   type=file   style= "display:none "> <input   type=button   value=浏览   οnclick=a1.click()>

 

 

 

 

 

自己写的代码内容如下：判断是否上传的是word文件，对file输入框的美化

 

 

                   <form method="post" name="tigangform" ENCTYPE="multipart/form-data">
                    <br><br>
                        <input type="file"" id="pic" name="pic" style= "display:none ">
                        <c:choose>
                        <c:when test="${tiganglunweidzhied.tigang==4 || tiganglunweidzhied.tigang==3 || tiganglunweidzhied.tigang==2 }">
                         <div class="t-right-bottom">不能上传</div>
                        </c:when>
                        <c:otherwise>
                          <input class="t-right-bottom"   type="button"   value="上传文件"   οnclick="pic.click();">
                        </c:otherwise>
                        </c:choose>
                        <div id="tigangxianshiid" style="display: none">
                        <input type="button" id="name" name="name"/>
                        <div class="t-right-bottom"  οnclick="tigang();">确定上传</div>
                        </div>
                        <input type="hidden"" id="lunwen1" name="lunwen1" value="论文(1)"/>
                        <input type="hidden"" id="tigangstate" name="tigangstate" value="1"/>
                       

                      
                      </form> 
                    <script>
                        $("#pic").change(function () {
                            tigangsrkxianshi();
                          var value = $(this).val();
                              var filepath=value.substring(value.lastIndexOf('.')+1,value.length);
                            if(filepath != 'doc' && filepath != 'docx')
                            {
                                alert("文件类型不正确，只能上传word文件，请重新选择！");
                                 $("#pic").val("");
                                return false;
                            }
                          $("#name").val(value);
                        }).keyup();
                       
                        function tigang(){
                            if(document.getElementById("pic").value==""){
                                   alert("提示:\n请选择文件后上传！");
                                    document.getElementById("pic").focus();
                                   return false;
                            }else{

                                  var lunwen1=$("#lunwen1").val();
                                  var name=$("#name").val();
                                var url=encodeURI("lw01_Upload_do_tigang.shtm?lunwen1="+lunwen1+"&name="+name);
                                      url=encodeURI(url);
                                      document.tigangform.action=url;
                                    document.tigangform.submit();
                            }
                        }
                       
                        function tigangsrkxianshi(){
                            document.getElementById("tigangxianshiid").style.display="";
                        }
                    </script>