1. 程式人生 > >uploadify外掛單圖片上傳

uploadify外掛單圖片上傳

Route::any('upload', '[email protected]');
//////////////////////////////////////////////////////////////////////////////////////////////
<link rel="stylesheet" type="text/css" href="{{asset('resources/org/uploadify/uploadify.css')}}"> <style> .uploadify{display:inline-block;} .uploadify-button{border:none; border-radius:5px; margin-top:8px;} table.add_tab tr td span.uploadify-button-text{color: #FFF; margin:0;} </style>
    <input type="text" size="50" name="art_thumb">     <input id="file_upload" name="file_upload" type="file" multiple="true">     <img src="" alt="" id="art_thumb_img" style="max-width: 350px; max-height:100px;">
  <script src="{{asset('resources/org/uploadify/jquery.uploadify.min.js')}}" type="text/javascript"></script>
     <script type="text/javascript">                             <?php $timestamp = time();?>                             $(function() {                                 $('#file_upload').uploadify({                                     'buttonText' : '圖片上傳',//按鈕子                                     'formData'     : {                                         'timestamp' : '<?php echo $timestamp;?>',                                         '_token'     : "{{csrf_token()}}" //頭肯                                     },                                     'swf'      : "{{asset('resources/org/uploadify/uploadify.swf')}}",                                     'uploader' : "{{url('admin/upload')}}",  //上傳的路徑                                     'onUploadSuccess' : function(file, data, response) {                                         $('input[name=art_thumb]').val(data);                                         $('#art_thumb_img').attr('src','/'+data); //                                    alert(data);                                     }                                 });                             });        </script> // //圖片上傳 public function upload() {     $file = Input::file('Filedata');//獲取檔案資訊     if($file -> isValid()){         //$realPath = $file -> getRealPath(); //臨時檔案的絕對路徑.         $entension = $file -> getClientOriginalExtension(); //上傳檔案的字尾.         $newName = date('YmdHis').mt_rand(100,999).'.'.$entension;         $path = $file -> move(base_path().'/public/uploads',$newName);         //////////////////////檔案根目錄         $filepath = 'uploads/'.$newName;         return $filepath;     } } <td><img src="{{asset($v->imgpath)}}" style="width:200px;height:60px;"></td>


相關推薦

uploadify外掛圖片

Route::any('upload', '[email protected]'); /////////////////////////////////////////////////////////////////////////////////////////

jquery.fileupload.js外掛使用初探--圖片預覽

一、官方外掛下載地址:http://plugins.jquery.com/blueimp-file-upload/         下載下來後會發現裡面包含了一堆檔案,首先需要弄清楚的是最核心的部分是哪些,根據官方的例子可以知道,一個最簡單的jQuery File Uplo

thinkphp 多圖片 圖片

http json 多圖片上傳 模板 tar err ram mbo htm 不管是單圖片上傳還是多圖片上傳都必須要引用這兩個js 下載地址 鏈接:http://pan.baidu.com/s/1eStkUt0 密碼:asvo <script src="Public

圖片

i++ pts ugc bus enc bbr aes num jdb 圖片上傳單個圖片樣式 上面的效果 所使用的js 點擊文件上傳之後進行新增保存的時候,先上傳圖片至文件夾,之後進行數據保存, controller後臺實現代碼這裏是上傳,新增保存的方法就不寫了

form表圖片

1、前端頁面 <div class="tkDiv" id="addLOGO" style="display:none;z-index:12;width:800px;height:auto;margin-left:-400px;margin-top: -160px"> &l

SpringMVC圖片至資料庫和回顯

在登入時上傳一個圖片以及回顯。之前,需要匯入兩個jar包:commons-fileupload-1.3.1和commons-io-2.4。 Index.jsp頁面: 一定要寫 enctype="multipart/form-data",否則springmvc就會解析失敗。

百度UEditor呼叫圖片功能的解決方法

做了個文章編輯頁面,用了百度的UEditor,文章編輯上傳圖片毫無問題,但是封面圖上傳又開始頭疼了,想呼叫UEditor那個單圖片上傳的按鈕功能,但是js這塊實在沒深入研究過,先放下,找找網上可否有解決方案,方案倒是有,但基本都是出自同一源頭,方法都是再建立一個

ueditor圖片沒有觸發afterinsertimage事件

在一個開發過程中,想在圖片上傳後呼叫一些業務,在選擇多圖片上傳的時候可以順利呼叫,但是選擇單圖片上傳的時候並不能呼叫到afterinsertimage事件 在網上沒能找到合適的解決辦法,只能聽著別人的建議去看看ueditor.all.js,在這個檔案中單圖片上傳會觸發s

ASP.NET 多/ 圖片

前端暫時用layer框架: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html>

summernote的使用,及圖片

summernote是一款不錯的文字編輯器,樓主也是剛剛用,目前用到的就是文字和圖片直接上程式碼了<div id="summernote"></div> 這個是html程式碼,下面就是初始化和圖片上傳應用的程式碼 //富文字編輯器初始化 $('

webuploader 圖片外掛 配合著表提交 ajax方式

首先去官網下載 或者github上面下載 在 examples/image-upload 裡面的檔案 index.html  新增你要上傳的表單資訊 是把表單的資料 作為圖片上傳的引數 傳進去的 在 examples/image-upload 裡面的檔案upload.js

Bootstrap框架---krajee外掛fileinput--最好用的檔案元件----多張圖片互動方式三(推薦)

我們在前一章已經實現了 Bootstrap框架---Uploadify外掛----多張圖片上傳互動方式二 。本章主要關注單多張圖片上傳在Bootstrap框架中的佈局和實現。我們在之前的文章中已經在SpringMVC基礎框架的基礎上應用了BootStrap的後臺框架,在此基礎

C# Asp.net使用FormData對象實現ajax提交表圖片

sync ext syn data .... error post req 序列化 1、html代碼: <form id="postForm"> 文件名:<input type="text" name="filename" />

php 圖片之利用form表

idt cti contain 開啟 1.7 png ret 選擇圖片 post 、利用form表單上傳此種方式是最原始的上傳方式,前端就是簡單的form表單,後端我們有PHP處理傳輸過來的文件。首先看前端的代碼 upload.html 1 2 3 4

layui 圖片+表提交+ Spring MVC

throw https tput dex prev ava efi tst clas Layui 的上傳是最常用的, 不可或缺, 記錄一下代碼, 以後復制都能用!! 1.前端HTML: <div class="layui-form-item">

form表圖片及展示

pen bdc type comm 之前 jpg ctype turn ali .comment_con .file{position: relative;top:2rem;z-index: 999;width: 5rem;height: 5rem;background:

megapix-image外掛 使用Canvas壓縮圖片 MegaPixImage.js下載

MegaPixImage.js下載地址 <!DOCTYPE html > <html> <head> <title>通過Canvas及File API縮放並上傳圖片</title> <script

FormData物件提交表圖片/檔案

1.建立一個FormData空物件,然後使用append方法新增key/value var formdata = new FormData(); formdata.append('name','fdipzone'); formdata.append('gender','male');

前端外掛-LayUI-----多圖片

效果預覽 引數列表  前臺程式碼 @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=dev

axios在vue中的應用(二)—— 表提交圖片

使用axios實現圖片預覽、圖片上傳等功能: methods: { // 圖片預覽 priviewImg(e) { // ... }, // 提交表單 sumitRefund() { let fd = new FormDat