Question

我写了一个方法，有助于将图像上传到page.There文本区域和输入区域上传文件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;
}

我的问题是如何在代码中进一步使用来自retursString方法的返回值？

Answer 1

只需为结果指定一个变量：

var result = returnString("someString");

编辑：

注意到：var imgSrc = document.getElementById(stringValue).value();，.value不是方法，而是属性，请移除()。

var imgSrc = document.getElementById(stringValue).value;

Answer 2

只有当用户决定点击该按钮时，才会显示该按钮。因此，当用户单击按钮时，您无法预测何时执行要运行的代码。幸运的是，正如您所知，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中将函数传递给函数是很舒服的。你会做很多事。

Answer 3

var imgSrc = document.getElementById(stringValue).value;

来自onClick的返回值

3 个答案: