jquery.uploadView 이미지 미리 보기 업로드 기능 구현

4195 단어 jqueryuploadView사진 미리 보기 업로드
사진 이 올 라 오고 인터넷 에 버 전이 많아 요.오늘 도 많이 찾 아 봐 야 겠 어 요.결국 uploadview 를 찾 아서 수정 을 했 어 요.
코드 보기

@{
 Layout = null;
}
<!DOCTYPE html>
<html>
<head>
 <meta name="viewport" content="width=device-width" />
 <title>Index</title>
 <script src="~/Scripts/jquery-1.8.2.min.js"></script>
 <script src="~/Scripts/jquery.uploadView.js"></script>
</head>
<body>
 <div>
  <div class="shangchuan">
   <h4>  </h4>
   <div class="js_uploadBox" style="position: relative">
    <div id="preview" class="js_showBox">
     <img id="imghead" border="0" src="http://static.neihanhongbao.com/highads/images/nologo.jpg" alt="    " style="width:100px; height:100px" />
    </div>
    <input type="file" name="file" id="id" style="position: absolute; top: 0px; left:0px; height: 100px; filter: alpha(opacity:0); opacity: 0; width: 100px" onclick="Upload()">
   </div>
   <input type="hidden" id="hidTmp_ID" name="Tmp_ID" value="" />
  </div>
 </div>
</body>
</html>
<script type="text/javascript">
 function Upload() {
  $("#id").uploadView({
   uploadBox: '.js_uploadBox',//       
   showBox: '.js_showBox',//           
   width: '100', //       ，  px
   height: '100', //       ，  px
   allowType: ["gif", "jpeg", "jpg", "bmp", "png"], //         
   maxSize:1, //           ，  M
   success: function (e) {
    var l = $(".js_showBox img").attr("src");
    $("#hidTmp_ID").val(l);
   }
  });
 }
</script>
코드 프론트 데스크 가 간단 해 보 입 니 다.
실현 효과 도 괜 찮 지만 이것 은 base 64 의 그림 을 저장 합 니 다.데이터 베 이 스 를 삽입 할 때 우 리 는 보통 xxxx.jpg 를 저장 하기 때문에 하나의 방법 이 필요 합 니 다.

 /// <summary>
  /// base64   
  /// </summary>
  /// <returns></returns>
  public static string BaseToImg(string baseimg) {
   byte[] bt = Convert.FromBase64String(baseimg.Replace("data:image/jpeg;base64,", ""));
   string filepath = "ImgServer".GetAppsetting();
   string sqlurl = @"" + DateTime.Now.ToString("yyyyMMdd") + "\\";
   string sqlname = "" + DateTime.Now.ToString("yyyyMMddhhmmssmsfff") + ".jpg";
   if (!System.IO.File.Exists(filepath + sqlurl)) {
    System.IO.Directory.CreateDirectory(filepath + sqlurl);
    System.IO.File.WriteAllBytes(filepath + sqlurl + sqlname, bt);
   }
   return sqlurl + sqlname;
  }
여기 서 나 는 날짜 에 따라 폴 더 를 묶 어서 데이터베이스 에 저장 했다.단일 파일 이 너무 크 지 않도록 하 세 요.
효과 도 는 이렇게.

 
이것 도 핸드폰 에 적용 된다.
총결산
위 에서 말 한 것 은 편집장 이 소개 한 jquery.uploadView 가 사진 미리 보기 업로드 기능 을 실현 하 는 것 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.편집장 은 제때에 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
JS 대상 과 JSON 상호 전환,New Function(),foreach(),DOM 이벤트 흐름 등 js 개발 기반 소결
express 프레임 워 크 는 Websocket 기반 의 간단 한 채 팅 방 을 실현 합 니 다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage