关键点:

1.制作一个表单..然后把上传字段附加到该表单中

2.制作一个框架..把表单的_target的属性指向该框架.

3.提交表单..

jQuery.extend({

    createUploadIframe: function(id, uri)
{
//create frame
var frameId = 'jUploadFrame' + id;
var iframeHtml = '<iframe id="' + frameId + '" name="' + frameId + '" style="position:absolute; top:-9999px; left:-9999px"';
if(window.ActiveXObject)
{
if(typeof uri== 'boolean'){
iframeHtml += ' src="' + 'javascript:false' + '"'; }
else if(typeof uri== 'string'){
iframeHtml += ' src="' + uri + '"'; }
}
iframeHtml += ' />';
jQuery(iframeHtml).appendTo(document.body); return jQuery('#' + frameId).get();
},
createUploadForm: function(id, fileElementId, data)
{
//create form
var formId = 'jUploadForm' + id;
var fileId = 'jUploadFile' + id;
var form = jQuery('<form action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>');
if(data)
{
for(var i in data)
{
jQuery('<input type="hidden" name="' + i + '" value="' + data[i] + '" />').appendTo(form);
}
}
var oldElement = jQuery('#' + fileElementId);
var newElement = jQuery(oldElement).clone();
jQuery(oldElement).attr('id', fileId);
jQuery(oldElement).before(newElement);
jQuery(oldElement).appendTo(form); //set attributes
jQuery(form).css('position', 'absolute');
jQuery(form).css('top', '-1200px');
jQuery(form).css('left', '-1200px');
jQuery(form).appendTo('body');
return form;
}, ajaxFileUpload: function(s) {
// TODO introduce global settings, allowing the client to modify them for all requests, not only timeout
s = jQuery.extend({}, jQuery.ajaxSettings, s);
var id = new Date().getTime()
var form = jQuery.createUploadForm(id, s.fileElementId, (typeof(s.data)=='undefined'?false:s.data));
var io = jQuery.createUploadIframe(id, s.secureuri);
var frameId = 'jUploadFrame' + id;
var formId = 'jUploadForm' + id;
// Watch for a new set of requests
if ( s.global && ! jQuery.active++ )
{
jQuery.event.trigger( "ajaxStart" );
}
var requestDone = false;
// Create the request object
var xml = {}
if ( s.global )
jQuery.event.trigger("ajaxSend", [xml, s]);
// Wait for a response to come back
var uploadCallback = function(isTimeout)
{
var io = document.getElementById(frameId);
try
{
if(io.contentWindow)
{
xml.responseText = io.contentWindow.document.body?io.contentWindow.document.body.innerHTML:null;
xml.responseXML = io.contentWindow.document.XMLDocument?io.contentWindow.document.XMLDocument:io.contentWindow.document; }else if(io.contentDocument)
{
xml.responseText = io.contentDocument.document.body?io.contentDocument.document.body.innerHTML:null;
xml.responseXML = io.contentDocument.document.XMLDocument?io.contentDocument.document.XMLDocument:io.contentDocument.document;
}
}catch(e)
{
jQuery.handleError(s, xml, null, e);
}
if ( xml || isTimeout == "timeout")
{
requestDone = true;
var status;
try {
status = isTimeout != "timeout" ? "success" : "error";
// Make sure that the request was successful or notmodified
if ( status != "error" )
{
// process the data (runs the xml through httpData regardless of callback)
var data = jQuery.uploadHttpData( xml, s.dataType );
// If a local callback was specified, fire it and pass it the data
if ( s.success )
s.success( data, status ); // Fire the global callback
if( s.global )
jQuery.event.trigger( "ajaxSuccess", [xml, s] );
} else
jQuery.handleError(s, xml, status);
} catch(e)
{
status = "error";
jQuery.handleError(s, xml, status, e);
} // The request was completed
if( s.global )
jQuery.event.trigger( "ajaxComplete", [xml, s] ); // Handle the global AJAX counter
if ( s.global && ! --jQuery.active )
jQuery.event.trigger( "ajaxStop" ); // Process result
if ( s.complete )
s.complete(xml, status); jQuery(io).unbind() setTimeout(function()
{ try
{
jQuery(io).remove();
jQuery(form).remove(); } catch(e)
{
jQuery.handleError(s, xml, null, e);
} }, ) xml = null }
}
// Timeout checker
if ( s.timeout > )
{
setTimeout(function(){
// Check to see if the request is still happening
if( !requestDone ) uploadCallback( "timeout" );
}, s.timeout);
}
try
{ var form = jQuery('#' + formId);
jQuery(form).attr('action', s.url);
jQuery(form).attr('method', 'POST');
jQuery(form).attr('target', frameId);
if(form.encoding)
{
jQuery(form).attr('encoding', 'multipart/form-data');
}
else
{
jQuery(form).attr('enctype', 'multipart/form-data');
}
jQuery(form).submit(); } catch(e)
{
jQuery.handleError(s, xml, null, e);
} jQuery('#' + frameId).load(uploadCallback );
return {abort: function () {}}; }, uploadHttpData: function( r, type ) {
var data = !type;
data = type == "xml" || data ? r.responseXML : r.responseText;
// If the type is "script", eval it in global context
if ( type == "script" )
jQuery.globalEval( data );
// Get the JavaScript object, if JSON is used.
if ( type == "json" )
eval( "data = " + data );
// evaluate scripts within html
if ( type == "html" )
jQuery("<div>").html(data).evalScripts(); return data;
}
})

很多人问:在上传图片文件时,在上传之前怎么进行无刷新预览呢?这里我把我所使用的方法写一下,包括了flash和视频文件,代码如下。

选择页面JS代码:
<script language="javascript">
function checkData()
{
   var fileName=document.getElementById("FileUp").value;
   if(fileName=="")
     return;
     //检查文件类型
   var exName=fileName.substr(fileName.lastIndexOf(".")+1).toUpperCase()
      if(exName=="JPG"||exName=="BMP"||exName=="GIF")
       {
          //document.getElementById("myimg").src=fileName;
          document.getElementById("previewImage").innerHTML='<img src=\''+fileName+'\' width=100 height=100 >';
       }
     else
       if(exName=="SWF")
        {
          document.getElementById("previewImage").innerHTML='<embed src=\''+fileName+'\' width=\'100\' height=\'100\' quality=\'high\' bgcolor=\'#f5f5f5\' ></embed>';
         }
     else
        if(exName=="WMV"||exName=="MPEG"||exName=="ASF"||exName=="AVI")
         {
            var strcode='<embed src=\''+fileName+'\' border=\'0\' width=\'100\' height=\'100\'  quality=\'high\' ';
            strcode+=' autoStart=\'1\' playCount=\'0\' enableContextMenu=\'0\' type=\'application/x-mplayer2\'></embed>';
            document.getElementById("previewImage").innerHTML=strcode;
         }
    else
       {
          alert("请选择正确的图片文件");
          document.getElementById("FileUp").value="";
        }
     }

</script>

HTML代码:

<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%" ID="Table1">
<tr>
<td width="255" height="100%" valign="middle">
<INPUT id="FileUp" style="WIDTH: 253px; HEIGHT: 22px" type="file" size="23" name="File1"
runat="server" onchange="checkData()"><br>
&nbsp;&nbsp;注:这里可以是图片(jpg或gif格式),flash动画(swf)及视频文件(wmv,mpeg,asf,avi)。大小限定在1M以内。
</td>
<td>
<div id="previewImage">当前页预览</div>
</td>
</tr>
</table>

最新文章

  1. 我的MYSQL学习心得(十四) 备份和恢复
  2. 如何通过ShadowSocket自动更新Chrome
  3. 隐马尔可夫模型(Hidden Markov Model,HMM)
  4. ASP.NET MVC验证标注的扩展-checkbox必选
  5. redis的备份
  6. SQL Server 2008 R2【SET ANSI_PADDING填充属性】插入一条数据后,为何每一列都默认的在字符后多了几个空格
  7. Codeforces Round #115 A. Robot Bicorn Attack 暴力
  8. web前端工程师必须掌握的localStorage(二)
  9. windows Compiler toolchain env
  10. Java内存区域和GC机制篇
  11. linux 安装nginx 详解
  12. CTF 文件包含与伪协议
  13. 在控制台进行依赖注入(DI in Console)
  14. Vscode 插件
  15. vue+typescript基础练习
  16. Apache Hadoop 2.9.2 的YARN High Available 模式部署
  17. Django框架详细介绍---AJAX
  18. 开启text汇聚排序
  19. Java NIO系列教程(七) selector原理 Epoll版的Selector
  20. LEGB

热门文章

  1. cordova / Ionic 开发问题汇总
  2. PyQt5教程——菜单和工具栏(3)
  3. html字符转义
  4. isearch5 index,attribute和summary。
  5. jQuery知识集锦
  6. getpass模块
  7. linux FTP配置详解
  8. AsyncTask和AsyncQueryHandler之比较
  9. 键盘事件keydown、keypress、keyup随笔整理总结
  10. MVC中JSON字符长度超出限制