无刷新上传 _ 帅哥易的博客-专注web技术实战经验积累

第一种思路，构造一个form表单，将file控件加入到此form中去（同时要复制一个新的file控件替换到原来的位置。），此form的target为一个iframe，这样提交就不会出现页面跳转。代码如下：

<body>
   	<section>
   		<div>
			<input type='file' id="fileinput" onchange="upload()"/>
		</div>
   		<div class=""><img id="preview" /></div>
   	</section>
</body>

function upload(){  //上传动作触发函数
    uploadFile('fileinput', 'upload_action.php', 'feedback');
}
function feedback(e){  //上传之后的回调函数
    alert(e.msg);
    if(e.code==1){
        $('#preview').attr('src', e.data);
    }
}

function uploadFile(id, action, callback){ //id为file控件的id, action为后台处理脚本，callback为回调函数名称
    //清理iframe
    var iframe = document.getElementById('upload_FormSubmit_iframe');
    var uploadform = document.getElementById("file_upload_form");
    !!iframe && document.body.removeChild(iframe);
    !!uploadform && document.body.removeChild(uploadform);
    //新建iframe
    try {  
        iframe = document.createElement('<iframe name="upload_FormSubmit_iframe" id="upload_FormSubmit_iframe" src="about:blank">');  
    }catch(ex){  
        iframe = document.createElement('iframe');  
    }
    iframe.id = 'upload_FormSubmit_iframe';	
    iframe.name = 'upload_FormSubmit_iframe';
    iframe.src = 'about:blank';	
    iframe.style.display = 'none';
    document.body.appendChild(iframe);
    var objForm = document.createElement("form");
    objForm.action = action;
    objForm.target = "upload_FormSubmit_iframe";
    objForm.encoding = "multipart/form-data";
    objForm.method = "post";
    objForm.id = "file_upload_form";
    objForm.style.display = "none";  
    objForm.innerHTML = '<input id="callbackName" name="callbackName" type="hidden" value="'+callback+'"/>';
    var node = document.getElementById(id);
    var elclone = node.cloneNode(true);
    node.parentNode.insertBefore(elclone, node);
    node.name = 'fileField';
    objForm.appendChild(node);
    document.body.appendChild(objForm);
    objForm.submit();
}

附带贴上php后台代码

define('UPLOAD_DIR','upload');
$callback = strip_tags($_POSlc_'callbackName');
define('CALLBACKNAME', $callback);
$fileFieldName = 'fileField';
function output($arr){
    $json = json_encode($arr);
    echo "<script>";
    echo "parent.".CALLBACKNAME."(eval('('+'$json'+')'));";
    echo "</script>";
    exit;
}
try{
    $allowFileTypes = array('gif','jpg','jpeg','png');
    $savePath = UPLOAD_DIR;
    $maxSize = 1024*1024*2;
    $overwrite = 1;
    
    $fileName = $_FILES[$fileFieldName]['name'];
    $ext = strtolower(substr($fileName,strrpos($fileName,".")));
    $newFileName = date("YmdHis") . '_' . rand(10000, 99999).$ext;
    $tempFile = $_FILES[$fileFieldName]['tmp_name'];
    $fileSize = $_FILES[$fileFieldName]['size'];
    $type = str_replace('.','',$ext);
    $newPath = rtrim($savePath,'/').'/'.$newFileName;
    
    if(!is_uploaded_file($tempFile)) output( array('code'=>-1, 'msg'=>'网络繁忙'));
    if(!in_array($type, $allowFileTypes)) output(array('code'=>-2, 'msg'=>'文件格式不允许'));
    if($fileSize>$maxSize) output(array('code'=>-3, 'msg'=>'文件格式不允许'));
    if(!@is_writable($savePath)) output(array('code'=>-4, 'msg'=>'目录不可写'));
    if(!$overwrite && @file_exists($newPath)) output(array('code'=>-5, 'msg'=>'文件已存在！'));
    
    move_uploaded_file($tempFile,$newPath);

    output(array('code'=>1, 'msg'=>'文件上传成功', 'data'=>$newPath));
}catch(Exception $e){
    output(array('code'=>0, 'msg'=>$e->getMessage()));
}

第二种思路，利用ajax方法。代码如下：

function AjaxUploader(form, cb, filter){
    
        function ajax(url, formData){
            var xhr = new XMLHttpRequest();
            xhr.open('POST', url, true);
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    var resType = xhr.responseType;
                    var resBody = xhr.response;
                    typeof(cb)==='function' && cb(null, resBody);
                } else if(xhr.status !== 200) {
                    typeof(cb)==='function' && cb(xhr.status, xhr.statusText);
                }
            };
            xhr.onerror = function (){
                typeof(cb)==='function' && cb('Network error');
            };
            //xhr.setRequestHeader();
            xhr.send(formData);
        }
        
        form.onsubmit = function (event) {
            var action = form.action;
            var formData = new FormData(form);
            if (typeof(filter) === 'function') {
                filter(formData, function(){
                    ajax(action, formData);
                });
            } else {
                ajax(action, formData);
            }
            
            event.preventDefault();
        }
}

使用方法：
HTML:

<form id="myform" action="/upload" method="post" enctype="multipart/form-data">
	<input type="file" name="myfile" accept="*/*" /> <input type="submit" value="Submit" /> 
</form>

JAVASCRIPT:

window.onload = function () {
    AjaxUploader(document.getElementById('myform'), function (err, data){
         if (!err){
              // do something.
         }   
    });
}

无刷新上传

Category

Tags