ajax 檔案上傳

最後更新：2018-12-05 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

最近寫了不少別人寫過的東西，哎。

HTML

View Code

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
</head>

<body>
<form id="J_myUploadForm" action="" method="post" enctype="multipart/form-data">
<input type="file" name="fileField" id="fileField" />
</form>
<input type="button" value="ajaxFileUpload" id="btn"/>
<script src="ajaxFileUpload.js"></script>
<script>
var btn = document.getElementById('btn');
btn.onclick = function(){
    ajaxFileUpload({
        id:'fileField',
        callback:function(){
var src = this.responseText;
var img = document.createElement('img');
                img.src = src;
                document.body.appendChild(img);
        }
    });    
}
</script>
</body>
</html>

PHP

View Code

<?php
move_uploaded_file($_FILES["fileField"]["tmp_name"], "upload/" . $_FILES["fileField"]["name"]);
echo "upload/" . $_FILES["fileField"]["name"];
?>

/*
    作者：天涯
    QQ：63886829
    eMail:flyinksy@gmail.com
    說明：ajax檔案上傳
*/
var ajaxFileUpload = function(opts){
return new ajaxFileUpload.prototype.init(opts);
};
ajaxFileUpload.prototype = {
    init:function(opts){
var set = this.extend({
            url:'result.php',
            id:'fileId',
            callback:function(){}
        },opts || {});
var _this = this;
var id = +new Date();
var form = this.createForm(id),frame = this.createIframe(id,set.url);
var oldFile = document.getElementById(set.id)
var newFile = oldFile.cloneNode(true);
var fileId = 'ajaxFileUploadFile'+id;
        oldFile.setAttribute('id',fileId);
        oldFile.parentNode.insertBefore(newFile,oldFile);
        form.appendChild(oldFile);//注意瀏覽器安全問題，要將原檔案域放到建立的form裡提交
        form.setAttribute('target',frame.id);//將form的target設定為iframe,這樣提交後返回的內容就在iframe裡
        form.setAttribute('action',set.url);
        setTimeout(function(){
            form.submit();
if(frame.attachEvent){
                frame.attachEvent('onload',function(){_this.uploadCallback(id,set.callback);});
            }else{
                frame.onload = function(){_this.uploadCallback(id,set.callback);}
            }
        },100);
    },
/*
        建立iframe，ie7和6比較蛋疼，得像下面那樣建立，否則會跳轉
*/
    createIframe:function(id,url){
var frameId = 'ajaxFileUploadFrame'+id,iFrame;
var IE = /msie ((\d+\.)+\d+)/i.test(navigator.userAgent) ? (document.documentMode ||  RegExp['\x241']) : false,
        url = url || 'javascript:false';
if(IE && IE < 8){
            iFrame = document.createElement('<iframe id="' + frameId + '" name="' + frameId + '" />');
            iFrame.src = url;
        }else{
            iFrame = document.createElement('iframe');
this.attr(iFrame,{
                'id':frameId,
                'name':frameId,
                'src':url
            });
        };
        iFrame.style.cssText = 'position:absolute; top:-9999px; left:-9999px';
return document.body.appendChild(iFrame);
    },
/*
        建立form
*/
    createForm:function(id){
var formId = 'ajaxFileUploadForm'+id;
var form = document.createElement('form');
this.attr(form,{
            'action':'',
            'method':'POST',
            'name':formId,
            'id':formId,
            'enctype':'multipart/form-data',
            'encoding':'multipart/form-data'
        });
        form.style.cssText = 'position:absolute; top:-9999px; left:-9999px';
return document.body.appendChild(form);  
    },
/*
        擷取iframe內容，執行回呼函數，並移除產生的iframe和form
*/
    uploadCallback:function(id,callback){
var frame = document.getElementById('ajaxFileUploadFrame'+id),form = document.getElementById('ajaxFileUploadForm'+id);data = {};
var db = document.body;
try{
if(frame.contentWindow){
                data.responseText = frame.contentWindow.document.body ? frame.contentWindow.document.body.innerHTML : null;
                data.responseXML = frame.contentWindow.document.XMLDocument ? frame.contentWindow.document.XMLDocument : frame.contentWindow.document;
            }else{
                data.responseText = frame.contentDocument.document.body ? frame.contentDocument.document.body.innerHTML : null;
                data.responseXML = frame.contentDocument.document.XMLDocument ? frame.contentDocument.document.XMLDocument : frame.contentDocument.document;
            }
        }catch(e){};
        callback && callback.call(data);
        setTimeout(function(){
            db.removeChild(frame);
            db.removeChild(form);
        },100);
    },
    attr:function(el,attrs){
for(var prop in attrs) el.setAttribute(prop,attrs[prop]);
return el;
    },
    extend:function(target,source){
for(var prop in source) target[prop] = source[prop];
return target;
    }
};
ajaxFileUpload.prototype.init.prototype = ajaxFileUpload.prototype;

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More