0

我写了一个帮助上传图片到页面的方法。有一个文本区域和输入区域，用于上传 id=imgFileUploadQwersergsd 的文件

function forumImageUpload() {    
    if (!($("input#imgFileUploadQwersergsd").length)) {
        $("div").last().append("<input id='imgFileUploadQwersergsd' type='file' data-url='/Images' style='display:none;' />");
        }
    var uploader = $("input#imgFileUploadQwersergsd");
    $("div").last().append("<button id='ok' onClick =\"returnString('imgFileUploadQwersergsd')\">" + "Ok" + "</button>");

returnString 方法返回上传的文件名：

function returnString(stringValue) {
    var imgSrc = document.getElementById(stringValue).value();
    var pos = imgSrc.lastIndexOf("\\");
    if (pos != -1) {
        imgSrc = imgSrc.substr(pos);
    }
    return imgSrc;
}

我的问题是如何在代码中进一步使用 returтString 方法的返回值？

4

3 回答 3

2

只需为结果分配一个变量：

var result = returnString("someString");

编辑：

刚刚注意到：var imgSrc = document.getElementById(stringValue).value();,.value不是方法，它是属性，删除().

var imgSrc = document.getElementById(stringValue).value;
于 2013-08-21T15:43:15.050 回答
1

该按钮显然仅在用户决定单击它时才被单击。因此，当用户单击按钮时，您无法预测何时执行您想要运行的代码。幸运的是，正如您所发现的，javascript 允许您通过onclick事件拦截按钮单击。

这意味着，使用的返回值的唯一方法returnString()是从 onclick 处理程序内部。

例如，假设您有一个想要使用结果的函数returnString()。让我们称之为doSomething()这个例子。使用 的返回值的第一个明显方法returnString()很简单：

$("div").
  last().
  append(
    "<button id='ok' onClick =\"doSomething(returnString('imgFileUploadQwersergsd'))\">" +
      "Ok" +
    "</button>"
  );

但我的就是这么丑。多重引用地狱和比页面宽度长的字符串怎么办。更不用说，如果你想对结果进行任何额外的处理，你最终不得不在字符串中维护 javascript 代码：

"<button id='ok' onClick =\"" +
  "var x = returnString('imgFileUploadQwersergsd');" +
  "if (x.match(somePattern)) {" +
  "  doSomething(x);" +
  "}" +
"\">"

这几乎不可读，并且是等待发生的语法错误。只是..不..不要这样做。

相反，您可以以字符串形式创建 HTML，让 jQuery 为您解析并在 javascript 中执行 javascript：

$("div").last().append("<button id='ok'>OK</button>");
$("#ok").click(function(){
  // from previous example:
  var x = returnString('imgFileUploadQwersergsd');
  if (x.match(somePattern)) {
    doSomething(x);
  }
});

看，不再引用地狱，更容易阅读和维护。

但是等等，如果你仍然想返回点击函数的表单来使用结果doSomething()呢？例如，如果您尝试执行以下操作怎么办：

function forumImageUpload() {
  // ...

  var result;

  $("#ok").click(function(){
    var x = returnString('imgFileUploadQwersergsd');
    if (x.match(somePattern)) {
      result = doSomething(x);
    }
  });

  doSomethingElse(result); // DOES NOT WORK!
}

这是行不通的，因为当doSomethingElse被调用时，按钮还没有被点击。解决方案是将需要使用结果的任何和所有代码移动returnString到doSomething事件处理程序内部：

function forumImageUpload() {
  // ...

  $("#ok").click(function(){
    var result;

    var x = returnString('imgFileUploadQwersergsd');
    if (x.match(somePattern)) {
      result = doSomething(x);
      doSomethingElse(result); // WORKS!
    }
  });
}

但是等等，你说，如果你想forumImageUpload返回值怎么办？可能是这样的：

function forumImageUpload() {
  // ...

  $("#ok").click(function(){
    var result;

    var x = returnString('imgFileUploadQwersergsd');
    if (x.match(somePattern)) {
      result = doSomething(x);
      return doSomethingElse(result); // WONT WORK
    }
  });
}

var y = forumImageUpload();
doYetAnotherThing(y); // DOES NOT WORK!

处理这种情况的方法是让forumImageUpload接受回调并在回调中移动所有想要使用结果的代码：

function forumImageUpload(callback) {
  // ...

  $("#ok").click(function(){
    var result;

    var x = returnString('imgFileUploadQwersergsd');
    if (x.match(somePattern)) {
      result = doSomething(x);
      result = doSomethingElse(result);
      if (callback) {
        callback(result); // execute a callback instead of returning
      }
    }
  });
}

forumImageUpload(function(y){
  // move code that needs to use the result in here:

  doYetAnotherThing(y); // WORKS!
});

以上基本上是您处理异步代码的方式，它涵盖了从 onclick 事件到 ajax 调用到 setTimeout 的所有内容。轻松地将函数传递给 javascript 中的函数。你会做很多。

于 2013-08-21T16:28:36.080 回答
0 
var imgSrc = document.getElementById(stringValue).value;
于 2013-08-21T15:45:50.273 回答