小木虫 --- 500万硕博科研人员喜爱的学术科研平台
&&查看话题
文章接收后上传了图片电子文件，编辑部回复称图片不可编辑，请问我该怎么办
I am writing regarding your manuscript 704971 to be published shortly in ''Journal of Analytical Methods in Chemistry'' After checking the uploaded files, I have found that all the figures are not editable. We need to have full control over the figures, that is, to be able to click inside the figure to edit the lines, the arrow heads, and the font of the words written inside the figure to match the journal style. Please access the MTS and upload each figure in a separate (ps, eps, fig, ai, Visio, wmf, emf, word, Excel, PowerPoint, obj, cdr or PDF) file, and make sure it is editable, taking into consideration that any figures saved as jpg, bmp, png or tif format are automatically uneditable.
这是编辑部给我的回复，因为的的图中有行标，列标，有些，还有标题，我的做法是打上标题后保存成jpg格式，编辑部发来邮件说我的图片不可编辑，请问我该如何改，用什么格式比较好，也比较容易，附上两张文章里的图
fig2(a).jpg
研究生必备与500万研究生在线互动！
扫描下载送金币怎样对百度文库中自己上传的文档进行编辑????_百度知道为什么我在百度文库上传不了文档？电脑显示是这样的。谢谢^_^_百度知道&&&&& 发请求有两种方式，一种是用ajax，另一种是用form提交，默认的form提交如果不做处理的话，会使页面重定向。以一个简单的demo做说明：
&&&&& html如下所示，请求的路径action为"upload"，其它的不做任何处理：
&form method="POST" action="upload" enctype="multipart/form-data"&
名字 &input type="text" name="user"&&/input&
头像 &input type="file" name="file"&&/input&
&input type="submit" id="_submit" value="提交"&&/input&
&&&&& 服务端(node)response直接返回: "Recieved form data"，演示如下：
&&&&&& 可以看到默认情况下，form请求upload的同时重定向到upload。但是很多情况下是希望form请求像ajax一样，不会重定向或者刷新页面。像上面的场景，当上传完成之后，将用户选择的头像显示在当前页面。
&&&&& 解决办法第一种是使用html5的FormData，将form里面的数据封装到FormData对象里，然后再以POST的方式send出去。如下面代码所示，对提交按钮的单击事件做一个响应，代码第6行获取到form的DOM对象，然后第8行构造一个FormData的实例，第18行，将form数据发送出去。
document.getElementById("_submit").onclick = function(event){
//取消掉默认的form提交方式
if(event.preventDefault) event.preventDefault();
else event.returnValue = false;
//对于IE的取消方式
var formDOM = document.getElementsByTagName("form")[0];
//将form的DOM对象当作FormData的构造函数
var formData = new FormData(formDOM);
var req = new XMLHttpRequest();
req.open("POST", "upload");
//请求完成
req.onload = function(){
if(this.status === 200){
//对请求成功的处理
//将form数据发送出去
req.send(formData);19 //避免内存泄漏20 req =
&&&&& 上传成功后，服务将返回图片的访问地址，补充14行对请求成功的处理：在submit按钮的上方位置显示上传的图片：
var img = document.createElement("img");
img.src = JSON.parse(this.responseText).
formDOM.insertBefore(img, document.getElementById("_submit"));
&&&&& 示例：
& & & 如果使用jQuery，可以把formData作为ajax的data参数，同时设置contentType: false和processData: false，告诉jQuery不要去处理请求头和发送的数据。
&&&&& 看起来这种提交方式跟ajax一样，但是其实并不是完全一样，form提交的数据格式有，如果要上传文件则必须为multipart/form-data，所以上面的form提交请求里的http的头信息里面的Content-Type为multipart/form-data，而普通的ajax提交为application/json。form提交完整的Content-Type如下：
"content-type":"multipart/form- boundary=------WebKitFormBoundaryYOE7pWLqdFYSeBFj"
& && & 除了multipart/form-data之外，还指定了boundary，这个boundary的作用是用来区分不同的字段。由于FormData对象是不透明的，调用JSON.stringify将会返回一个空的对象{}，同时FormData只提供append方法，所以无法得到FormData实际上传的内容，但是可以通过分析工具或者服务收到的数据进行查看。在上面如果上传一个文本文件，那么服务收到的POST数据的原始格式是这样的：
------WebKitFormBoundaryYOE7pWLqdFYSeBFj
Content-Disposition: form- name="user"
------WebKitFormBoundaryYOE7pWLqdFYSeBFj
Content-Disposition: form- name="file"; filename="test.txt"
Content-Type: text/plain
这是一个文本文件的内容。
------WebKitFormBoundaryYOE7pWLqdFYSeBFj--
&&&& 从上面服务收到的数据看出FormData提交的格式，每个字段以boundary隔开，最后以--结束。而ajax请求，send出去的数据格式是自定义的，一般都是以key=value中间用&连接：
var req = new XMLHttpRequest();
var sendData = "user=abc&file=这是一个文本文件的内内容";
req.open("POST", "upload");
//发送的数据需要转义，见上面提到的三种格式
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
req.send(sendData);
&&&&& 服务就会收到和send发出去的字符串一模一样的内容，然后再作参数解析，所以就得统一参数的格式：
user=abc&file=这是一个文本文件的内容
&&&&& 从这里可以看出POST本质上并不比GET安全，POST只是没有将数据放在网址传送而已。
&&&&& 考虑到FormData到了IE10才支持，如果要支持较低版本的IE，那么可以借助iframe。
&&&&& 文中一开始就说，默认的form提交会使页面重定向，而重定向的规则在，可以和a标签一样指定为"_blank"，在新窗口中打开；还可以指定为一个iframe，在该iframe中打开。所以可以弄一个隐藏的iframe，将form的target指向这个iframe，当form请求完成时，返回的数据就会由这个iframe显示，正如上面在新页面显示的："Recieved form data"。请求完成后，iframe加载完成，触发load事件，在load事件的处理函数里，获取该iframe的内容，从而拿到服务返回的数据了！拿到后再把iframe删掉。
&&&&& 在提交按钮的响应函数里，首先创建一个iframe，设置iframe为不可见，然后再添加到文档里：
var iframe = document.createElement("iframe");
iframe.width = 0;
iframe.height = 0;
iframe.border = 0;
iframe.name = "form-iframe";
iframe.id = "form-iframe";
iframe.setAttribute("style", "width:0;height:0;border:none");
//放到document
this.form.appendChild(iframe);
&&&&& 改变form的target为iframe的name值：
this.form.target = "form-iframe";
&&&&& 然后再响应iframe的load事件：
iframe.onload = function(){
var img = document.createElement("img");
//获取iframe的内容，即服务返回的数据
var responseData = this.contentDocument.body.textContent || this.contentWindow.document.body.textC
img.src = JSON.parse(responseData).
f.insertBefore(img, document.getElementById("_submit"));
//删掉iframe
setTimeout(function(){
var _frame = document.getElementById("form-iframe");
_frame.parentNode.removeChild(_frame);
& & & 最后提交请求：
//如果提示submit函数不存在，请注意form里面是否有id/value为submit的控件
this.form.submit();&
&&&& 第二种办法到这里就基本可以了，但是如果看163邮箱或者QQ邮箱上传文件的方式，会发现和上面的两种方法都不太一样。用httpfox抓取请求的数据，会发现上传的内容的格式并不是上面说的用boundary隔开，而是直接把文件的内容POST出去了，而文件名、文件大小等相关信息放在了文件的头部。如163邮箱：
POST Data:
this is a text
Mail-Upload-name: content.txt
Mail-Upload-size: 15
&&&&& 可以推测它们应该是直接读取了input文件的内容，然后直接POST出去了。要实现这样的功能，可以借助FileReader，读取input文件的内容，再保留二进制的格式发送出去：
var req = new XMLHttpRequest();
req.open("POST", "upload");
//设置和邮箱一样的Content-Type
req.setRequestHeader("Content-Type", "application/octet-stream");
var fr = new FileReader();
fr.onload = function(){
req.sendAsBinary(this.result);
req.onload = function(){
//一样，省略
//读取input文件内容，放到fileReader的result字段里
fr.readAsBinaryString(this.form["file"].files[0]);
&&&&& 代码第13行执行读文件，读取完毕后触发第6行的load响应函数，第7行以二进制文本形式发送出去。由于sendAsBinary的支持性不是很好，可以自行：
if(typeof XMLHttpRequest.prototype.sendAsBinary === 'undefined'){
XMLHttpRequest.prototype.sendAsBinary = function(text){
var data = new ArrayBuffer(text.length);
var ui8a = new Uint8Array(data, 0);
for (var i = 0; i & text. i++){
ui8a[i] = (text.charCodeAt(i) & 0xff);
this.send(ui8a);
&&&& 代码的关键在于第6行，将字符串转成8位无符号整型，还原二进制文件的内容。在执行了fr.readAsBinaryString之后，二进制文件的内容将会以utf-8的编码以字符串形式存放到result，上面的第6行代码将每个unicode编码转成整型(&0xff或者parseInt)，存放到一个8位无符号整型数组里面，第8行把这个数组发送出去。如果直接send，而不是sendAsBinary，服务收到的数据将无法正常还原成原本的文件。
&&&& 上面的实现需要考虑文件太大，需分段上传的问题。
&&&& 关于FileReader的，IE10以上支持，IE9有另外一套File API。
&&&& 文章讨论了3种办法实现无刷新上传文件，分别是使用iframe、FormData和FileReader，支持性最好是的iframe，但是从体验的效果来看FormData和FileReader更好，因为这两者不用生成一个无用的DOM再删除，其中FormData最简单，而FileReader更加灵活。
阅读(...) 评论()
