java无刷新上传图片_Javascrpt无刷新文件上传

最新推荐文章于 2023-04-23 23:14:51 发布

原创最新推荐文章于 2023-04-23 23:14:51 发布 · 66 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#java无刷新上传图片

本文介绍了一个基于ArcGIS Web应用程序的文件上传功能实现方法，包括前端页面的交互设计及后端服务器端处理流程。详细讲解了如何使用JavaScript监听文件选择事件并提交表单，以及Node.js服务器端如何接收并处理上传文件。

4 uploadInfo

下面是简单的demo

ArcGIS Web Application

var upload = document.getElementById('placeholder');

var uploader = document.getElementById('uploader');

var app = document.getElementsByName('app')[0];

var clickLietener = function() {

app.click();

}

var changeListener = function() {

uploader.submit();

}

if (app.addEventListener) {

app.addEventListener('change', changeListener, false);

} else if (app.attachEvent) {

app.attachEvent('onchange', changeListener);

}

var appFrame = document.getElementById('frame');

var listener = function() {

var doc = appFrame.contentWindow.document;

var textAreas = doc.getElementsByTagName('textarea');

if (textAreas && textAreas.length > 0) {

var response = textAreas[0].value;

alert(response);

}

if (appFrame.addEventListener) {

appFrame.addEventListener('load', function(evt) {

listener();

}, false);

} else if(appFrame.attachEvent) {

appFrame.attachEvent('onload', function() {

listener();

});

}

ArcGIS Web Application

var upload = document.getElementById('placeholder');

var uploader = document.getElementById('uploader');

var app = document.getElementsByName('app')[0];

var clickLietener = function() {

app.click();

}

var changeListener = function() {

uploader.submit();

}

if (app.addEventListener) {

app.addEventListener('change', changeListener, false);

} else if (app.attachEvent) {

app.attachEvent('onchange', changeListener);

}

var appFrame = document.getElementById('frame');

var listener = function() {

var doc = appFrame.contentWindow.document;

var textAreas = doc.getElementsByTagName('textarea');

if (textAreas && textAreas.length > 0) {

var response = textAreas[0].value;

alert(response);

}

if (appFrame.addEventListener) {

appFrame.addEventListener('load', function(evt) {

listener();

}, false);

} else if(appFrame.attachEvent) {

appFrame.attachEvent('onload', function() {

listener();

});

}

var http = require('http');

var url = require('url');

var fs = require('fs');

var qs = require('querystring');

var formidable = require('formidable');

http.createServer(function(req, res) {

var _url = url.parse(req.url);

if (_url.pathname === '/index') {

fs.readFile('./index.html', function(err, data) {

res.writeHead(200, {

"Content-Type": "text/html; charset=UTF-8"

});

res.write(data);

res.end();

});

} else if (_url.pathname === '/upload') {

var formStream = new formidable.IncomingForm();

formStream.uploadDir = './tmp';

formStream.parse(req, function(err, fields, files) {

console.log(fields);

console.log(files);

var info = null;

var accept = req.headers.accept;

if (err) {

info = {success: false};

} else {

info = {success: true};

}

if (accept.indexOf('application/json') > -1) {

res.writeHead(200, {

"Content-Type": "application/json;charset=utf-8"

});

res.write(JSON.stringify(info));

} else {

res.writeHead(200, {

"Content-Type": "text/html; charset=UTF-8"

});

var responseText = '

' +

JSON.stringify(info) +

res.write(responseText);

}

res.end();

});

}

}).listen(8888);

1 var http = require('http');

2 var url = require('url');

3 var fs = require('fs');

4 var qs = require('querystring');

5 var formidable = require('formidable');

7 http.createServer(function(req, res) {

8 var _url = url.parse(req.url);

9 if (_url.pathname === '/index') {

10 fs.readFile('./index.html', function(err, data) {

11 res.writeHead(200, {

12 "Content-Type": "text/html; charset=UTF-8"

13 });

14 res.write(data);

15 res.end();

16 });

17 } else if (_url.pathname === '/upload') {

18 var formStream = new formidable.IncomingForm();

19 formStream.uploadDir = './tmp';

20 formStream.parse(req, function(err, fields, files) {

21 console.log(fields);

22 console.log(files);

23 var info = null;

24 var accept = req.headers.accept;

25 if (err) {

26 info = {success: false};

27 } else {

28 info = {success: true};

29 }

30 if (accept.indexOf('application/json') > -1) {

31 res.writeHead(200, {

32 "Content-Type": "application/json;charset=utf-8"

33 });

34 res.write(JSON.stringify(info));

35 } else {

36 res.writeHead(200, {

37 "Content-Type": "text/html; charset=UTF-8"

38 });

39 var responseText = '

' +

40 JSON.stringify(info) +

41 '

42 res.write(responseText);

43 }

44 res.end();

45 });

46 }

47 }).listen(8888);

后台代码需要注意Content-Type响应头的设置，ie8、9碰到不知如何渲染的MIME类型会把它当成文件下载下来。这里和这里

不知大家有没有注意到，上面的demo是一步上传，选择好文件后直接上传到服务器，ie8以上的浏览器没问题，如果是在ie8中情况就有些棘手。ie中文件上传控件长成这个样子，单击一下button会弹出文件选择框，如果单击的是text部分，没有反映，你需要双击才会弹出选择框。一个办法是让鼠标尽量单击button部分，button的大小跟font-size有关。但如果你的可点击区域太大。。。。。

所幸还是有解决办法的，这时需要在form中加一个label标签，for属性指向file。这样点击label时会触发for指向元素的click事件，这时label的自然行为。同时把file移除屏幕外。注意一定不能用input[type=button]，在点击button时候调用file的click事件，然后在file change事件中调用form.submit方法，这种行为在ie中是被禁止的，回报“access denied”错误。