Javascript與asp.net 實現Ajax多檔案無重新整理上傳

阿新 • • 發佈：2019-01-14

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>AjaxUpload</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><script type="text/javascript"

src="scripts/jquery.js"></script><script type="text/javascript" src="scripts/interface.js"></script><style type="text/css" media="all">
*{
    margin:0;
    padding:0;}

img{border:none;}

ul{
    list-style-type:none;}

ul li{
    padding:2px 4px;}

body{
    font-family: 宋體, 黑體,verdana, Arial

;
    font-size:12px;
    color:#333;
    background:#DDDDDD;
    margin:30px;
    padding:0;}

.box{
    border:1px solid #CCC;
    background:#FFF;
    padding:8px;
    margin:5px;
    clear:both;}

.title {
    background:#F0F0F0;padding:5px;
    font-weight:bold;}

.tooltip{
    background:#F0F0F0;
    border-color:#bbb;}

.tooltip h1

{
    color:#A8DF00;
    font-family: 微軟雅黑,黑體,宋體,verdana, Arial;}

.titlebutton{
    float:right;}

.uploading{
    background:#FFF;
    color:#444;
    text-align:left;
    width:500px;
    padding:4px;}

.image{
    border:1px solid #ddd;
    margin:2px;
    padding:1px;
    display:inline;
    width:300px;}

.uploadcontrol {
    margin:4px 0;
    border-bottom:1px solid #F0F0F0;}</style><script type="text/javascript">

     $(document).ready(function(){
          for(var i=0;i<5;i++)
          {
             uploadcreate($("#uploadbox"),i);
          }
    });

     var hideDiv =function(idName){
         $("#"+idName).fadeOut("fast");
     };

     //是否顯示上傳後的圖片var isshowpic =true;
     var uploadshowpic =function(el){
         isshowpic =!(isshowpic);
         if(isshowpic)
         {
             el.html("圖片顯示關閉");
         }
         else
         {
             el.html("圖片顯示開啟");
         }
     };

     //載入中的GIF動畫var loadingUrl ="images/ajax-loader.gif";

    //選擇檔案後的事件,iframe裡面呼叫的var uploading =function(imgsrc,itemid){
        var el = $("#uploading"+itemid);
        $("#ifUpload"+itemid).fadeOut("fast");
        el.fadeIn("fast");
        el.html("<img src='"+loadingUrl+"' align='absmiddle' /> 上傳中

");
        return el;
    };

    //重新上傳方法    var uploadinit =function(itemid){
        currentItemID ++;
        $("#uploading"+itemid).fadeOut("fast",function(){
             $("#ifUpload"+itemid).fadeIn("fast");
             $("#panelViewPic"+itemid).fadeOut("fast");
        });

    };

    //上傳時程式發生錯誤時，給提示，並返回上傳狀態var uploaderror =function(itemid){
        alert("程式異常，"+itemid+"項上傳未成功。");
        uploadinit();
    };

    //上傳成功後的處理var uploadsuccess =function(newpath,itemid){
        $("#uploading"+itemid).html("檔案上傳成功. <a href='javascript:void(0);' onclick='uploadinit("+itemid+");'>[重新上傳]</a>");
        if(isshowpic)
        {
            $("#panelViewPic"+itemid).html("<a href='"+newpath+"' title='點選檢視大圖' target='_blank'><img src='"+newpath+"' alt='' style='width:300px;' /></a>");
            $("#panelViewPic"+itemid).fadeIn("fast");
        }
    };


    var currentItemID =0;  //用於存放共有多少個上傳控制元件了//建立一個上傳控制元件var uploadcreate =function(el,itemid){
        currentItemID ++;
        if(itemid ==null)
        {
            itemid = currentItemID;
        }
        var strContent ="<div class='uploadcontrol'><iframe src=/"upload.aspx?id="+itemid+"/" id=/"ifUpload"+itemid+"/" frameborder=/"no/" scrolling=/"no/" style=/"width:400px; height:28px;/"></iframe>";
        strContent +="<div class=/"uploading/" id=/"uploading"+itemid+"/" style=/"display:none;/" ></div>";
        strContent +="<div class=/"image/" id=/"panelViewPic"+itemid+"/" style=/"display:none;/"></div></div>";
        el.append(strContent);
    };

</script></head><body><div id="tipbox" class="box tooltip"><a href="#" onclick="hideDiv('tipbox');">[關閉]</a><div class="content"><h1>AjaxUpload - 多檔案無重新整理上傳原始碼 v1.0</h1><p>作者:李華順 <a href="http://huacn.cnblogs.com" target="_blank">http://huacn.cnblogs.com</a></p></div></div><div id="toolbox" class="tooltip box"><a href="#" onclick="uploadcreate($('#uploadbox'));">新增一個新上傳控制元件</a><a href="#" onclick="uploadshowpic($(this));">圖片顯示關閉</a></div><div id="uploadbox" class="box"></div></body></html>

Javascript與asp.net 實現Ajax多檔案無重新整理上傳

Javascript與asp.net 實現Ajax多檔案無重新整理上傳

jquery ajax 多檔案Excel解析上傳

模仿Ajax的動態無重新整理上傳檔案

Struts2+Ajax+Jquery的無重新整理上傳圖片

C# Asp.net使用FormData對象實現ajax提交表單及上傳圖片

Javascript與ASP.NET（一般處理程式）關於URL（get方式）傳遞中文亂碼問題的解決方案

asp.net 使用ckfinder 不彈窗直接上傳圖片、檔案。

ajaxfileupload.js外掛結合一般處理檔案實現Ajax無重新整理上傳

jQuery+php+ajax實現無重新整理上傳檔案功能

ASP.NET 使用ajaxupload.js插件出現上傳較大文件失敗的解決方法

基於jQuery的ajax系列之用FormData實現頁面無重新整理上傳

多檔案預覽上傳基於Struts

asp.net使用百度的webuploader批量上傳圖片

使用七牛介面實現圖片和檔案一鍵上傳

form+iframe實現無重新整理上傳檔案

ajax頁面無重新整理上傳檔案

通過Ajax使用FormData物件無重新整理上傳檔案

如何使用ajax實現無重新整理上傳

使用百度webuploader外掛進行多檔案型別分片上傳例項

利用js實現無重新整理上傳頭像（或檔案）並顯示進度條

Javascript與asp.net 實現Ajax多檔案無重新整理上傳

相關推薦