图片上传在Shiny

时间:2015-10-15 23:47:03

标签: file-upload shiny

我一直试图弄清楚如何通过闪亮的应用程序从本地计算机上传图像,但是我无法确定如何访问图像以便在服务器端代码中使用它然后保存它到一个偏远的位置。现在,我使用jQuery尝试了fileInput()和自定义HTML代码(如下所示)。     

<!-- Google web fonts -->
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700' rel='stylesheet' />

  <!-- The main CSS file -->
  <link href='txt/assets/css/style.css' rel='stylesheet' />

    <form id='upload' method='post' action='txt/upload.php' enctype='multipart/form-data'>
      <div id='drop'>
        Drop Here

      <a>Browse</a>
        <input type='file' name='upl' multiple />
          </div>

          <ul>
          <!-- The file uploads will be shown here -->
          </ul>

          </form>

                <!-- JavaScript Includes -->
                <!-- <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script> -->
                  <script src='txt/assets/js/jquery.knob.js'></script>

                    <!-- jQuery File Upload Dependencies -->
                    <script src='txt/assets/js/jquery.ui.widget.js'></script>
                      <script src='txt/assets/js/jquery.iframe-transport.js'></script>
                        <script src='txt/assets/js/jquery.fileupload.js'></script>

                          <!-- Our main JS file -->
                          <script src='assets/js/script.js'></script>

这是upload.php:     

// A list of permitted file extensions
$allowed = array('png', 'jpg', 'gif','zip');

if(isset($_FILES['upl']) && $_FILES['upl']['error'] == 0){

$extension = pathinfo($_FILES['upl']['name'], PATHINFO_EXTENSION);

if(!in_array(strtolower($extension), $allowed)){
    echo '{"status":"error"}';
    exit;
}

if(move_uploaded_file($_FILES['upl']['tmp_name'], 'uploads/'.$_FILES['upl']['name'])){
    echo '{"status":"success"}';
    exit;
}
}

echo '{"status":"error"}';
exit;

这是应用程序的服务器和ui代码。

shinyServer(function(input, output) {

output$your_species <- renderText({
    current_species
})

output$current_sp <- renderText({
    current_species
})

# output$your_image <- renderImage({
#   input$image_upload
# }, deleteFile = FALSE)

source("pages/main_page.R")
source("pages/help_page.R")

header <- dashboardHeader(title="End. Sp. Images")

sidebar <- dashboardSidebar(disable=TRUE)

body <- dashboardBody(
    main_page,
    help_page
)
dashboardPage(header, sidebar, body, skin="blue")

main_page <- {
fluidPage(
    column(1,
        img(src="01_DOW_LOGO_COLOR_100.png"),
        tags$hr()#,
    ),
    column(11,
        tabsetPanel(
            tabPanel(title="Main",
                tags$h3(textOutput("your_species"), style=make_bold()),
                fluidRow(
                    column(4,
                        box(title="Image information",
                            collapsible=TRUE,
                            status="primary",
                            solidHeader=TRUE,
                            height=NULL,
                            width=NULL,
                            textInput("species",
                                label="Species",
                                value=current_species
                            ),
                            textInput("img_src",
                                label="Image source",
                                value="http://"
                            ),
                            selectInput("license",
                                label="Image license",
                                choices=list_of_licenses,
                                selected="Select..."
                            ),
                            textInput("attribution",
                                label="Image attribution",
                                value="To whom should attribution be given?"
                            ),
                            tags$hr(),
                            tags$p("Drop photo on button or click to choose", 
                                   style="color:gray"
                            ),
                            # fileInput("image_upload",
                            #     label="Photo upload"
                            # ),
                                    tags$div(  
                              HTML(html_txt)
                                    ),
                            submitButton("Submit")

                            # htmlOutput("wikimedia_embed")
                        )
                    ),
                    column(5,
                        box(title="Your image",
                            collapsible=TRUE,
                            status="primary",
                            solidHeader=TRUE,
                            height=500,
                            width=NULL,
                            imageOutput("your_image",
                                height=NULL,
                                width="100%"
                            )
                        )
                    ),
                    column(3,
                        tags$p("Some search options", style=make_18_bold()),
                        tags$p("Pre-formatted searches", style="color:gray"),
                        infoBox(
                            title="First option",
                            value=tags$a("Wikimedia", 
                                         href=wiki_srch,
                                         target='_blank'),
                            icon=icon("picture-o"),
                            color="light-blue",
                            width=NULL
                        ),
                        # infoBox(
                        #     title="Second option",
                        #     value=tags$a("CC Search", 
                        #                  # href="http://search.creativecommons.org",
                        #                  href=cc_search,
                        #                  target='_blank'),
                        #     icon=icon("picture-o"),
                        #     color="light-blue",
                        #     width=NULL
                        # ),
                        infoBox(
                            title="Second option",
                            value=tags$a("Google Image Search", 
                                         href=goog_srch,
                                         target='_blank'),
                            icon=icon("picture-o"),
                            color="light-blue",
                            width=NULL
                        ), #,
                        tags$p("Creative Common portal", style="color:gray"),
                        infoBox(
                            title="Check here too!",
                            value=tags$a("CC Search", 
                                         href="http://search.creativecommons.org",
                                         target='_blank'),
                            icon=icon("picture-o"),
                            color="light-blue",
                            width=NULL
                        )
                    )
                )
            )
        )
    )
)
}

HTML完全打破了应用程序上传部分的风格,但我认为这仅仅是因为目录结构不佳。但是,使用这两种方法我无法弄清楚如何访问上传的文件。 “选择文件”按钮有效,它显示文件已上传,但我不知道在服务器端调用什么,这将允许我远程保存文件并在{{1}中使用该文件}。

非常感谢有关如何访问上传文件的任何帮助!

0 个答案:

没有答案