JS怎样用AJAX上传文件?

aa6103848252 2012-08-28 10:00:02



<html>

<body>

	<script src="http://www.bt2magnet.com/static/js/ajaxupload.js"></script>

<script type="text/javascript">

$(function() {

	new AjaxUpload("fileupload", {

			onComplete: function(filae, response) {

alert('uploaded!');

		},

		action: "http://www.bt2magnet.com/upload.php",

		allowedExtensions: ["torrent"],

		autoSubmit: true,

		name: 'torrent',

	});



})



</script>





<form name="form1" method="post" action="http://www.bt2magnet.com/upload.php" enctype="multipart/form-data">

choose torrent file

<input  id="fileupload" type="file" />

</form>

</body>

</html>

为什么没反应啊?

...全文

31716 15 打赏收藏转发到动态举报

写回复

用AI写文章

15 条回复

切换为时间正序

请发表友善的回复…

发表回复

ddacz1314 2013-08-15

打赏
举报

fileupload这个ID的标签改为button试下

wwwhhb4002 2012-11-05

打赏
举报

学习一下长知识

chen_ya_ping 2012-11-05

打赏
举报

http://www.uploadify.com/

bbjbepzz 2012-11-05

打赏
举报

以前上传文件是不能用ajax上传的，什么无刷新上传，其实就是用了一个iframe，看似异步，其实没有异步。现在HTML5好像添加了一个专门操作文件的对象，可以读取文件的二进制，或许现在可以用异步上传了。

aa6103848252 2012-11-04

打赏
举报

引用 10 楼 javascript4 的回复:

我使用JS + iframe实现了多文件上传(非同时,有一点差别.). 做法: 用JS去动态生成多个以下HTML: XML/HTML code1234<form method="post" action="GwallJS/Gimg/upFile.jsp?upFile=1&savePath=<%=request.getParameter("savePath")……

上传后会返回一些信息在iframe,我怎么获取?

javascript4 2012-08-31

打赏
举报

我使用JS + iframe实现了多文件上传(非同时,有一点差别.).
做法:
用JS去动态生成多个以下HTML:



<form method="post" action="GwallJS/Gimg/upFile.jsp?upFile=1&savePath=<%=request.getParameter("savePath") %>" id="upImgForm1" name="upImgForm1" ENCTYPE="multipart/form-data" target="hidden_frame1">

						File1:<input id="upFile1" name="upFile1" type="file" class="fileInput" onchange="Gimg.selectFile(this)"/>

						<iframe name='hidden_frame1' onload="if(Gimg)Gimg.upFlieFinish(this)" id="hidden_frame1"></iframe>

通过一个按钮去一起提交所有表单:



                for ( var i = 1; i < 6; i++) {

			if ($("upFile" + i).value.length > 0) {

				//this.loading("loading" + i);    //开始显示进度条

				//this.loadImgFun("img_upFile" + i);//预览

				$("upImgForm" + i).submit();    //提交表单

			}

		}

在通过后台处理文件上传,返回一个标识,什么表示成功,什么表示失败,什么表示异常....
再通过iframe的onload事件去处理这个标识.根据这个标识再进行提醒操作.
当不支持上传预览的时候,可以在上传完毕后返回文件路径,再去显示图片.

以上显示进度条: 是通过用2个div一个背景设置为某个颜色,里面在套一个div,去显示另种颜色,在通过loading(id)去执行改变里面的div宽度.来模拟进度条... - -! 其实根本和实际进度条没点关系...
希望对你有用!

a5d1sa5ffs45rser 2012-08-30

打赏
举报

[Quote=引用 1 楼 chang_yuan_2011 的回复:]

我没用插件，直接用下面的方法就可以实现，使用了html5的FormData对象
JScript code
function http(date,url,callback) {
function createXHttpRequest() {
if (window.ActiveXObject) {
xmlhttp = new ActiveXObject("Mi……
[/Quote]

IE不支持FormData怎么办?

圆㺭 2012-08-29

打赏
举报

我没用插件，直接用下面的方法就可以实现，使用了html5的FormData对象

function http(date,url,callback) {

    function createXHttpRequest() {

      if (window.ActiveXObject) {

        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

      }

      else if (window.XMLHttpRequest) {

        xmlhttp = new XMLHttpRequest();

      }

      else {

        return;

      }

    }



    function starRequest(date) {

      createXHttpRequest();

      xmlhttp.onreadystatechange = function() {

        if (xmlhttp.readyState == 4) {

          if (xmlhttp.status == 200) {

            callback();

           

          }

        }

      };

      xmlhttp.open("POST", url, true);

      xmlhttp.send(date);

    }

    starRequest(date);

  }

var date = new FormData($("from[name='form1']")[0]);

var url = "http://www.bt2magnet.com/upload.php";

var callback = function(){};

http(date,url,callback);

hch126163 2012-08-29

打赏
举报

js 不能多文件

无刷新，可以用iframe 上传来实现局部刷新

小伙写代码 2012-08-29

打赏
举报

ajaxupload.js里是啥东西，是基于JQUERY的？

aa6103848252 2012-08-29

打赏
举报

[Quote=引用 2 楼的回复:]

ajaxupload.js里是啥东西，是基于JQUERY的？
[/Quote]
http://www.bt2magnet.com/static/js/ajaxupload.js
别人写的,我不太清楚

aa6103848252 2012-08-29

打赏
举报

[Quote=引用 3 楼的回复:]

js 不能多文件

无刷新，可以用iframe 上传来实现局部刷新
[/Quote]
你好,只要单文件就行了,请问怎么实现?

aa6103848252 2012-08-29

打赏
举报

[Quote=引用 4 楼的回复:]

JScript code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta http-equiv="Content-Type" ……
[/Quote]

你好,请问 <script src="./ajaxupload.js"></script>中的JS哪有下载?

xuyanlu 2012-08-29

打赏
举报



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

 <head>

  <title> New Document </title>

  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">

  <script src="./ajaxupload.js"></script>

 </head>



 <body>

	<img src="./images/pic01.jpg" id="imgpic" width="320px" height="240px" />

	<div id='div_id'>上传</div>

	<script type="text/javascript">

		//您可以使用这些方法来配置AJAX的上传

		var upload = new AjaxUpload('#div_id',{action: 'upload.php'});

		//例如当用户选择了一些东西，设置一些参数

		upload.setData({'example_key': 'value'});

		//或者您可以在事件函数中直接使用这些方法

		new AjaxUpload('div_id', {

			action: 'upload.php',

			

			onComplete: function (file, response){

				if(response != ""){

					var obj = document.getElementById("imgpic");

					obj.src = "./images/" + response;

				}

			}

		});

	

	</script>

 </body>

</html>